GoodCarousel
GoodCarousel is a lightweight fully controlled carousel component for React with the following features:
- Put anything you want in the carousel as the items (img, div, video, etc.)
- Fully controlled with props
- Define the animation duration
- Responsive to window resizing
- Define how much of the next and previous items to show
- Define the gap between items
- Define the number of visible items
Demo
Implements responsiveness, mobile swiping, left/right navigation, and bubble navigation
Props
-
currentPane
(integer
, default:0
)
The index of the current pane to go to -
itemsPerPane
(integer
, default:3
)
The number of items visible on the screen at a time -
gap
(integer
, default:8
)
The number of pixels between items -
itemPeek
(integer
, default:40
)
The number of pixels of the next and previous items to show on the screen -
animationDuration
(number
, default:0.4
)
The number of seconds it takes for the carousel to animate to the next pane -
onRender
(({ currentPane, paneCount }) => void
, default:null
)
Callback that is called every time the carousel re-renders
Quickstart Example Use
import GoodCarousel from 'react-good-carousel';
const [currentPane, setCurrentPane] = React.useState(0);
const onRender = (carouselAttributes) => {
console.log(carouselAttributes);
};
<GoodCarousel
currentPane={currentPane}
itemsPerPane={3}
gap={8}
itemPeek={40}
animationDuration={0.4}
onRender={onRender}
>
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
<div>Item 4</div>
<div>Item 5</div>
<div>Item 6</div>
<div>Item 7</div>
<div>Item 8</div>
<div>Item 9</div>
</GoodCarousel>
<button
type="button"
onClick={() => setCurrentPane(currentPane - 1)}
>
Prev
</button>
<button
type="button"
onClick={() => setCurrentPane(currentPane + 1)}
>
Next
</button>