# @divanov/infinite-react-carousel

> Infinite carousel for react

Latest version **1.2.11** (published 2021-03-30) · MIT license · 0 weekly downloads

## Install

```sh
npm install @divanov/infinite-react-carousel
pnpm add @divanov/infinite-react-carousel
yarn add @divanov/infinite-react-carousel
bun add @divanov/infinite-react-carousel
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.2.11 |
| Published | 2021-03-30 |
| First published | 2021-03-30 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 54 |
| Unpacked size | 1.1 MB |
| Known vulnerabilities | 0 (+8 in 3 direct dependencies) |
| Install scripts | yes |
| Author | Hans wu |
| Maintainers | divanov |
| Keywords | carousel, slider, infinite, react, react-component |

## Links

- npm: https://www.npmjs.com/package/@divanov/infinite-react-carousel
- Repository: https://github.com/g787543/infinite-react-carousel
- Issues: https://github.com/g787543/infinite-react-carousel/issues
- npm.io page: https://npm.io/package/@divanov/infinite-react-carousel

## Dependencies (54)

- [opn](https://npm.io/package/opn.md) ^6.0.0
- [raf](https://npm.io/package/raf.md) ^3.4.1
- [antd](https://npm.io/package/antd.md) ^3.23.6
- [jest](https://npm.io/package/jest.md) ^24.8.0
- [react](https://npm.io/package/react.md) ^16.0.0
- [enzyme](https://npm.io/package/enzyme.md) ^3.10.0
- [eslint](https://npm.io/package/eslint.md) ^5.9.0
- [lodash](https://npm.io/package/lodash.md) ^4.17.15
- [core-js](https://npm.io/package/core-js.md) ^3.3.5
- [cssnano](https://npm.io/package/cssnano.md) ^4.1.10
- [express](https://npm.io/package/express.md) ^4.14.0
- [webpack](https://npm.io/package/webpack.md) ^4.21.0
- [node-sass](https://npm.io/package/node-sass.md) ^4.12.0
- [react-dom](https://npm.io/package/react-dom.md) ^16.0.0
- [@babel/cli](https://npm.io/package/@babel/cli.md) ^7.0.0
- [babel-core](https://npm.io/package/babel-core.md) ^7.0.0-bridge.0
- [babel-jest](https://npm.io/package/babel-jest.md) ^24.8.0
- [classnames](https://npm.io/package/classnames.md) ^2.2.5
- [css-loader](https://npm.io/package/css-loader.md) ^2.1.1
- [portfinder](https://npm.io/package/portfinder.md) ^1.0.24
- [prop-types](https://npm.io/package/prop-types.md) ^15.7.2
- [@babel/core](https://npm.io/package/@babel/core.md) ^7.1.2
- [npm-run-all](https://npm.io/package/npm-run-all.md) ^4.1.3
- [sass-loader](https://npm.io/package/sass-loader.md) ^8.0.0
- [webpack-cli](https://npm.io/package/webpack-cli.md) ^3.1.2
- [autoprefixer](https://npm.io/package/autoprefixer.md) ^9.6.4
- [babel-eslint](https://npm.io/package/babel-eslint.md) ^9.0.0
- [babel-loader](https://npm.io/package/babel-loader.md) ^8.0.4
- [node-notifier](https://npm.io/package/node-notifier.md) ^6.0.0
- [object-assign](https://npm.io/package/object-assign.md) ^4.1.1
- [webpack-merge](https://npm.io/package/webpack-merge.md) ^4.2.2
- [babel-polyfill](https://npm.io/package/babel-polyfill.md) ^6.26.0
- [postcss-loader](https://npm.io/package/postcss-loader.md) ^3.0.0
- [react-highlight](https://npm.io/package/react-highlight.md) ^0.12.0
- [jest-css-modules](https://npm.io/package/jest-css-modules.md) ^2.1.0
- [@babel/preset-env](https://npm.io/package/@babel/preset-env.md) ^7.1.0
- [webpack-dev-server](https://npm.io/package/webpack-dev-server.md) ^3.1.9
- [@babel/preset-react](https://npm.io/package/@babel/preset-react.md) ^7.0.0
- [eslint-plugin-react](https://npm.io/package/eslint-plugin-react.md) ^7.16.0
- [html-webpack-plugin](https://npm.io/package/html-webpack-plugin.md) ^3.2.0
- [clean-webpack-plugin](https://npm.io/package/clean-webpack-plugin.md) ^0.1.19
- [eslint-config-airbnb](https://npm.io/package/eslint-config-airbnb.md) ^18.0.1
- [eslint-plugin-import](https://npm.io/package/eslint-plugin-import.md) ^2.18.2
- [brotli-webpack-plugin](https://npm.io/package/brotli-webpack-plugin.md) ^1.1.0
- [eslint-plugin-jsx-a11y](https://npm.io/package/eslint-plugin-jsx-a11y.md) ^6.2.3
- [enzyme-adapter-react-16](https://npm.io/package/enzyme-adapter-react-16.md) ^1.15.1
- [mini-css-extract-plugin](https://npm.io/package/mini-css-extract-plugin.md) ^0.8.0
- [uglifyjs-webpack-plugin](https://npm.io/package/uglifyjs-webpack-plugin.md) ^2.1.2
- [resize-observer-polyfill](https://npm.io/package/resize-observer-polyfill.md) ^1.5.0
- [compression-webpack-plugin](https://npm.io/package/compression-webpack-plugin.md) ^3.0.0
- [webpack-auto-inject-version](https://npm.io/package/webpack-auto-inject-version.md) ^1.1.0
- [friendly-errors-webpack-plugin](https://npm.io/package/friendly-errors-webpack-plugin.md) ^1.7.0
- [@babel/plugin-transform-runtime](https://npm.io/package/@babel/plugin-transform-runtime.md) ^7.6.2
- [@babel/plugin-proposal-class-properties](https://npm.io/package/@babel/plugin-proposal-class-properties.md) ^7.1.0

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.2.11 (latest) — 2021-03-30

## README

###  📣: I have been busy with work recently and I want to find someone to maintain this project together. If any one want to maintain please create new issue or send email, thanks a lot.

# infinite-react-carousel

[![npm](https://img.shields.io/npm/v/infinite-react-carousel.svg)](https://www.npmjs.com/package/infinite-react-carousel)
[![npm](https://img.shields.io/npm/dt/infinite-react-carousel.svg)](https://www.npmjs.com/package/infinite-react-carousel)
[![Bundle Size](https://badgen.net/bundlephobia/minzip/infinite-react-carousel)](https://bundlephobia.com/result?p=infinite-react-carousel@latest)
[![license](https://img.shields.io/github/license/mashape/apistatus.svg)]()
[![Codecov](https://img.shields.io/codecov/c/github/g787543/infinite-react-carousel/master.svg)](https://codecov.io/gh/g787543/infinite-react-carousel/branch/master)
[![CircleCI](https://circleci.com/gh/g787543/infinite-react-carousel.svg?style=svg)](https://circleci.com/gh/g787543/infinite-react-carousel)

### Installation
**npm**

```bash
npm install infinite-react-carousel --save
```

**yarn**

```bash
yarn add infinite-react-carousel
```

### [Example](https://g787543.github.io/infinite-react-carousel/)
```js
import React from 'react';
import Slider from 'infinite-react-carousel';

const SimpleSlider = () => (
  <Slider dots>
    <div>
      <h3>1</h3>
    </div>
    <div>
      <h3>2</h3>
    </div>
    <div>
      <h3>3</h3>
    </div>
    <div>
      <h3>4</h3>
    </div>
    <div>
      <h3>5</h3>
    </div>
  </Slider>
);
```

### Props

| Prop | Description | Default | Type |
|------|-------------|---------|------|
| rows | Number of rows per slide in the slider, (enables grid mode) | 1 | Number |
| slidesPerRow | Number of slides to display in grid mode, this is useful with rows option | 1 | Number |
| slidesToShow | How many slides to show in one frame | 1 | Number |
| className |  | "" | String |
| centerMode | Center current slide | false | Boolean |
| swipe | Enable/disable swiping to change slides | true | Boolean |
| adaptiveHeight | Adjust the slide's height automatically | false | Boolean |
| centerPadding |  | 50 | String, Number |
| initialSlide | Index of first slide | false | Boolean, Number |
| pauseOnHover | Prevents autoplay while hovering on track | true | Boolean |
| autoplay | Enable/disable slider autoplay | false | Boolean |
| autoplayScroll | How many slides to scroll when autoplay is true | 1 | Number |
| autoplaySpeed | Delay between each auto scroll (in milliseconds) | 3000 | Number |
| beforeChange | Before Index change callback. `(oldIndex, newIndex) => ...` | null | Function |
| afterChange | Index change callback. `index => ...` | null | Function |
| duration | Transition duration in milliseconds | 200 | Number |
| shift | Set the spacing of the center item | 0 | Number |
| arrows | Enable/disable arrow button | true | Boolean |
| arrowsBlock |  | true | Boolean |
| arrowsScroll | How many slides to scroll when click arrows button | 1 | Number |
| prevArrow | Custom prev arrows button | null | Element |
| nextArrow | Custom next arrows button | null | Element |
| dots | Enable/disable dots | false | Boolean |
| dotsClass | CSS class for dots | "carousel-dots" | String |
| dotsScroll | How many slides to scroll on one page | 1 | Number |
| appendDots | Custom dots templates. Works same as customPaging | ```(dots) => <ul style={{ display: 'block' }}>{dots}</ul>``` | Function |
| customPaging | Custom paging templates | ```(i) => <button type="button">{i + 1}</button>``` | Function |
| onReszie | detect carousel resize | ```(e) => {}``` | Function |
| onSwipe | Callback after slide changes by swiping | ```(direction) => {}``` | Function |
| accessibility | Enable tabbing and arrow key navigation | true | Boolean |
| wheel | Enable mouse wheel to slide item | false | Boolean |
| wheelScroll | How many slides to scroll when wheel trigger | 1 | Number |
| virtualList |  | false | Boolean |
| overScan | Number of items to render before/after the visible slice of the carousel | 2 | Number |

### Methods

| Name | Description |
|------|-------------|
| slickNext | Go to the next slide |
| slickPrev | Go to the previous slide |
| slickGoTo | Go to any slide |
| slickPause | Pause the autoplay |
| slickPlay | Start the autoplay |

### Development

Want to run demos locally

```bash
git clone https://github.com/g787543/infinite-react-carousel.git
cd infinite-react-carousel
```

***npm***
```bash
npm install
npm run dev
```

***yarn***
```bash
yarn
yarn dev
```
open http://localhost:8080


### LICENSE

The project is licensed under the terms of [MIT license](https://github.com/g787543/infinite-react-carousel/blob/master/LICENSE)

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