framer-motion-carousel
Tags: react, javascript, tutorial, typescript
Published: 2023-04-04 16:29:02

[github](https://github.com/jiangbo2015/framer-motion-carousel)
[Live Demo](https://carousel-app-pi.vercel.app)
[npm](https://www.npmjs.com/package/framer-motion-carousel)

A simple `framer-motion-carousel`, used for `framer-motion`, `chakra-ui` support `click` and `swipe`, support c`ustom arrows`, `dots`, easy to use.

## Features of framer-motion-carousel:

- swipe and click to navigate
- custom arrows and dots
- external component control
- looping playback
- control playback duration
- autoplay


### Basic usage

![color carousel](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rz687n9w6h2m7bjoakgq.gif)

```jsx
import * as React from "react";
import Carousel from "framer-motion-carousel";

const colors = ["#f90", "#ef0", "#e0f"];

const App = () => (
  <div style={{ width: 600, height: 400 }}>
    <Carousel>
      {colors.map((item, i) => (
        <div
          key={i}
          style={{
            width: "100%",
            height: "100%",
            backgroundColor: colors[i],
          }}
        ></div>
      ))}
    </Carousel>
  </div>
);
export default App;
```

### images carousel

![images carousel](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t35dw7ns6dvmvtja7ykq.gif)

```jsx
<div style={{ width: 600, height: 400, margin: "0 auto" }}>
  <Carousel>
    {[1, 2, 3, 4].map((item, i) => (
      <img
        draggable="false"
        src={`./${item}.jpg`}
        key={i}
        width="100%"
        alt=""
      />
    ))}
  </Carousel>
</div>
```

### use external control button

```jsx
// set ref;
const carouselRef = React.useRef();

<div style={{ width: 600, height: 400, margin: "0 auto" }}>
    <div style={{display: 'flex', gap: '10px', marginBottom: '10px'}}>
        <button onClick={() => carouselRef.current.handlePrev()}>handlePrev</button>
        <button onClick={() => carouselRef.current.setIndex(2)}>goto index 2</button>
        <button onClick={() => carouselRef.current.handleNext()}>handleNext</button>
    </div>
    <Carousel ref={carouselRef} autoPlay={false}>
        {[1, 2, 3, 4].map((item, i) => (
            <img
                draggable="false"
                src={`./${item}.jpeg`}
                key={i}
                width="100%"
                alt=""
            />
        ))}
    </Carousel>
</div>
```

## 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 |

**If you like it, please give me a star**

[github](https://github.com/jiangbo2015/framer-motion-carousel)
[Live Demo](https://carousel-app-pi.vercel.app)
[npm](https://www.npmjs.com/package/framer-motion-carousel)