Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jiangbo2015/framer-motion-carousel
framer-motion carousel, simple & easy to use
https://github.com/jiangbo2015/framer-motion-carousel
carousel framer-motion react-carousel
Last synced: 8 days ago
JSON representation
framer-motion carousel, simple & easy to use
- Host: GitHub
- URL: https://github.com/jiangbo2015/framer-motion-carousel
- Owner: jiangbo2015
- Created: 2021-10-17T12:56:05.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2023-08-29T03:44:12.000Z (over 1 year ago)
- Last Synced: 2024-12-05T07:25:51.919Z (21 days ago)
- Topics: carousel, framer-motion, react-carousel
- Language: TypeScript
- Homepage: https://carousel-app-pi.vercel.app
- Size: 229 KB
- Stars: 90
- Watchers: 1
- Forks: 18
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# framer-motion-carousel
A simple `framer-motion-carousel`, used for `framer-motion`, `chakra-ui`
support `click` and `swipe`, support custom `arrows`, `dots`, easy to use.
*2.x use `framer-motion@6` now*
## Basic Usage
```jsx
import * as React from "react";
import Carousel from "framer-motion-carousel";
const colors = ["#f90", "#ef0", "#e0f"];
const App = () => (
{colors.map((item, i) => (
))}
);
export default App;
```
## images carousel
`img` element should add `draggable=false`
```jsx
{[1, 2, 3, 4].map((item, i) => (
))}
```
## use external control button
```jsx
// set ref;
const carouselRef = React.useRef();
carouselRef.current.handlePrev()}>handlePrev
carouselRef.current.setIndex(2)}>goto index 2
carouselRef.current.handleNext()}>handleNext
{[1, 2, 3, 4].map((item, i) => (
))}
```
## Example
[Live Demo](https://carousel-app-772051431.vercel.app)
[example repo](https://github.com/jiangbo2015/framer-motion-carousel/tree/main/example)
## props
| props | type | default | description |
|------------------|--------------------------------------------------------------------------------------|---------|----------------------------------------------------------------------|
| loop | boolean | true | loop play |
| autoPlay | boolean | true | auto play |
| interval | number | 2000 | auto play interval |
| renderArrowLeft | ({handlePrev: () => void, activeIndex: number}) => React.ReactNode | null | custom your arrows, `activeIndex` is current index |
| renderArrowRight | ({handleNext: () => void, activeIndex: number}) => React.ReactNode | null | custom your arrows, `activeIndex` is current index |
| renderDots | ({activeIndex: number, setActiveIndex: (index: number) => void;}) => React.ReactNode | null | custom your dots, `activeIndex` is current index |
| ref | React.Ref | null | Carousel ref, support `handleNext`, `handlePrev`, `setIndex` method |
## example
```
cd example && yarn install
yarn dev
```