https://github.com/emiliano-bucci/react-spring-carousel
A new Carousel experience for the web.
https://github.com/emiliano-bucci/react-spring-carousel
carousel js react react-carousel react-slider react-spring react-spring-carousel react-spring-slider slider touch
Last synced: about 2 months ago
JSON representation
A new Carousel experience for the web.
- Host: GitHub
- URL: https://github.com/emiliano-bucci/react-spring-carousel
- Owner: Emiliano-Bucci
- Created: 2021-12-07T12:53:35.000Z (over 3 years ago)
- Default Branch: dev
- Last Pushed: 2024-10-25T13:02:05.000Z (7 months ago)
- Last Synced: 2024-10-30T05:56:01.632Z (7 months ago)
- Topics: carousel, js, react, react-carousel, react-slider, react-spring, react-spring-carousel, react-spring-slider, slider, touch
- Language: TypeScript
- Homepage: https://react-spring-carousel.emilianobucci.com
- Size: 7.03 MB
- Stars: 68
- Watchers: 3
- Forks: 5
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# react-spring-carousel
> A performant React carousel component powered by `react-spring` and `@use-gesture`.
[](https://www.npmjs.com/package/react-spring-carousel) [](https://img.shields.io/bundlephobia/minzip/react-spring-carousel)
## Install
```bash
// npm v7.x
npm install --save react-spring-carousel
```
```bash
// npm v6.x or less
npm install --save react-spring react-spring-carousel
```
```bash
yarn add react-spring react-spring-carousel
```
## Usage
```tsx
import { useSpringCarousel } from 'react-spring-carousel'
const { carouselFragment, slideToPrevItem, slideToNextItem } = useSpringCarousel({
items: [
{
id: 'item-1',
renderItem:
Item 1,
},
{
id: 'item-2',
renderItem: Item 2,
},
],
})
return (
Prev item
{carouselFragment}
Next item
)
```
## Official documentation
For a complete overview of the library, please visit the official documentation.
[Visit here](https://react-spring-carousel.emilianobucci.com)