https://github.com/a7alabs/react-whirlpool
Dead easy carousel for reactjs and nextjs with built-in typescript support
https://github.com/a7alabs/react-whirlpool
carousel-component nextjs react
Last synced: about 1 year ago
JSON representation
Dead easy carousel for reactjs and nextjs with built-in typescript support
- Host: GitHub
- URL: https://github.com/a7alabs/react-whirlpool
- Owner: A7ALABS
- License: mit
- Created: 2022-11-30T17:00:41.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2024-03-25T07:22:11.000Z (over 2 years ago)
- Last Synced: 2025-05-07T20:55:45.141Z (about 1 year ago)
- Topics: carousel-component, nextjs, react
- Language: TypeScript
- Homepage:
- Size: 2.96 MB
- Stars: 4
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React Whirlpool Carousel
https://github.com/A7ALABS/react-whirlpool/assets/60537632/0e27a034-7582-431d-95b3-263f224c9048
https://github.com/A7ALABS/react-whirlpool/assets/60537632/d5f3ba93-56ca-4ff5-8467-dc10b4f72be2
**Features**
* Responsive
* Customize previous and next buttons
* Bi-directional - horizontal and vertical
* Auto play
## Installing
`yarn add react-whirlpool`
## Important
Make sure to import the css file with `import 'react-whirlpool/dist/cjs/component/SimpleCarousel.css'`
## Usage
```
import React, { useRef, useState } from "react";
import { SimpleCarousel } from "react-whirlpool";
import 'react-whirlpool/dist/cjs/component/SimpleCarousel.css' // => important
function App() {
const [list, setList] = useState(["A", "B", "C", "D", "E"]);
const simpleCarouselRef = useRef();
const [activeIndex, setActiveIndex] = useState(0);
return (
setActiveIndex(index)}
>
{list.map((item: string, key) => (
{item}
))}
//custom prev and next buttons
{
simpleCarouselRef.current &&
simpleCarouselRef.current.handlePrevEvent();
}}
>
Prev
{
simpleCarouselRef.current &&
simpleCarouselRef.current.handleNextEvent();
}}
>
Next
);
}
export default App;
```
## Props
| Name | Value | Description |
|-------------------| ------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------- |
| isHorizontal | boolean | Define the direction of the slider, defaults to 'horizontal'. |
| children | JSX Element | Pass any number of JSX elements (carousel cards) which are to be rendered in the carousel |
| gap | number | Define gap (in px) between two carousel cards |
| minHeight | string, optional | Define the minimum height of the carousel container |
|minWidth | string, optional | Define the minimum width of the carousel container |
|onActiveIndexUpdate| function, optional | Takes an active index (number) as argument to update selected index in SimpleCarousel |
| autoplay | boolean, default false, optional | Enable auto rotation of carousel, rotation interval is set to 3000ms |
| autoPlayInterval | number, default 3000, optional | Auto-play interval in milliseconds
hideArrows | boolean, default true, optional | Hide default arrows |
hideDevPanel | boolean, default true, optional | Hide dev panel |
hideInitGap | boolean, default true, optional | Hide initial gap between the first card and carousel container |
ref | any, optional | Create and pass reference to access the handler methods - 1. handlePrevEvent() to handle previous button clicking event and 2. handleNextEvent() to handle next button clicking event |
## Common Issues
1. `CJS WARNING - Failed to parse source map` => **Workaround** - [Link](https://github.com/facebook/create-react-app/discussions/11767#discussioncomment-2092902)