# framer-motion-carousel

> A simple framer motion carousel component for React

Latest version **2.0.4** (published 2023-08-29) · MIT license · 0 weekly downloads

## Install

```sh
npm install framer-motion-carousel
pnpm add framer-motion-carousel
yarn add framer-motion-carousel
bun add framer-motion-carousel
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.4 |
| Published | 2023-08-29 |
| First published | 2021-10-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 156.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 95 |
| Author | jiangbo2015 |
| Maintainers | jiangbo2019 |
| Keywords | react, component, carousel, motion, framer, swipe, image gallary, framer motion, chakra ui |

## Links

- npm: https://www.npmjs.com/package/framer-motion-carousel
- Repository: https://github.com/jiangbo2015/framer-motion-carousel
- Homepage: https://github.com/jiangbo2015/framer-motion-carousel.git#readme
- Issues: https://github.com/jiangbo2015/framer-motion-carousel/issues
- npm.io page: https://npm.io/package/framer-motion-carousel

## Dependencies (1)

- [framer-motion](https://npm.io/package/framer-motion.md) ^6.3.11

## Alternatives

- [@luma.gl/experimental](https://npm.io/package/@luma.gl/experimental.md) — 77.1K weekly downloads
- [persona-harness](https://npm.io/package/persona-harness.md) — 4.7K weekly downloads
- [@tsparticles/effect-bubble](https://npm.io/package/@tsparticles/effect-bubble.md) — 4.6K weekly downloads
- [f3d](https://npm.io/package/f3d.md) — 730 weekly downloads
- [spark-html-motion](https://npm.io/package/spark-html-motion.md) — 298 weekly downloads

## Recent versions

- 2.0.4 (latest) — 2023-08-29
- 2.0.0-beta.0 (beta) — 2022-06-19
- 2.0.3 — 2023-04-04
- 2.0.2 — 2023-04-04
- 2.0.1 — 2022-06-19
- 2.0.0 — 2022-06-19
- 1.0.7 — 2022-02-10
- 1.0.6 — 2021-10-20
- 1.0.5 — 2021-10-20
- 1.0.4 — 2021-10-19
- 1.0.3 — 2021-10-17
- 1.0.2 — 2021-10-17
- 1.0.1 — 2021-10-17
- 1.0.0 — 2021-10-17

## 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 = () => (
  <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

`img` element should add `draggable=false`

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

## Example

[Live Demo](https://carousel-app-772051431.vercel.app)

[example repo](https://github.com/jiangbo2015/framer-motion-carousel/tree/main/example)

![example](https://cdn.jsdelivr.net/gh/jiangbo2015/framer-motion-carousel/img.jpg)


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

---
_Source: https://npm.io/package/framer-motion-carousel · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._