A simple framer motion carousel component for React
npm install framer-motion-carouselA 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
``jsx
import * as React from "react";
import Carousel from "framer-motion-carousel";
const colors = ["#f90", "#ef0", "#e0f"];
const App = () => (
images carousel
element should add draggable=falsejsx
{[1, 2, 3, 4].map((item, i) => (
src={./${item}.jpg}
key={i}
width="100%"
alt=""
/>
))}
`use external control button
jsx
// set ref;
const carouselRef = React.useRef();
{[1, 2, 3, 4].map((item, i) => (
src={./${item}.jpeg}
key={i}
width="100%"
alt=""
/>
))}
`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,
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 installyarn dev