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

Demo

Demo Source

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>