react-spring-carousel

A performant React carousel component powered by react-spring and @use-gesture.

Install

// npm v7.x
npm install --save react-spring-carousel

// npm v6.x or less
npm install --save react-spring react-spring-carousel

yarn add react-spring react-spring-carousel

Usage

import { useSpringCarousel } from 'react-spring-carousel'

const { carouselFragment, slideToPrevItem, slideToNextItem } = useSpringCarousel({
  items: [
    {
      id: 'item-1',
      renderItem: <div>Item 1</div>,
    },
    {
      id: 'item-2',
      renderItem: <div>Item 2</div>,
    },
  ],
})

return (
  <div>
    <button onClick={slideToPrevItem}>Prev item</button>
    <div>{carouselFragment}</div>
    <button onClick={slideToNextItem}>Next item</button>
  </div>
)

Official documentation

For a complete overview of the library, please visit the official documentation.

Visit here