react-spring-carousel

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

Install

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

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

1yarn add react-spring react-spring-carousel

Usage

1import { useSpringCarousel } from 'react-spring-carousel'
2
3const { carouselFragment, slideToPrevItem, slideToNextItem } = useSpringCarousel({
4  items: [
5    {
6      id: 'item-1',
7      renderItem: <div>Item 1</div>,
8    },
9    {
10      id: 'item-2',
11      renderItem: <div>Item 2</div>,
12    },
13  ],
14})
15
16return (
17  <div>
18    <button onClick={slideToPrevItem}>Prev item</button>
19    <div>{carouselFragment}</div>
20    <button onClick={slideToNextItem}>Next item</button>
21  </div>
22)

Official documentation

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

Visit here