📣: 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.
npm
npm install infinite-react-carousel --saveyarn
yarn add infinite-react-carouselimport 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>
);| 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 |
| 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 |
Want to run demos locally
git clone https://github.com/g787543/infinite-react-carousel.git
cd infinite-react-carouselnpm
npm install
npm run devyarn
yarn
yarn devThe project is licensed under the terms of MIT license
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent