carousel

Infinite carousel for react

Nov 09, 2019
Infinite carousel for react

infinite-react-carousel

Infinite carousel for react.

View Demo View Github

Installation

npm

npm install infinite-react-carousel --save

yarn

yarn add infinite-react-carousel

Example

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

PropDescriptionDefaultType
rowsNumber of rows per slide in the slider, (enables grid mode)1Number
slidesPerRowNumber of slides to display in grid mode, this is useful with rows option1Number
slidesToShowHow many slides to show in one frame1Number
className""String
centerModeCenter current slidefalseBoolean
swipeEnable/disable swiping to change slidestrueBoolean
adaptiveHeightAdjust the slide's height automaticallyfalseBoolean
centerPadding50String, Number
initialSlideIndex of first slidefalseBoolean, Number
pauseOnHoverPrevents autoplay while hovering on tracktrueBoolean
autoplayEnable/disable slider autoplayfalseBoolean
autoplayScrollHow many slides to scroll when autoplay is true1Number
autoplaySpeedDelay between each auto scroll (in milliseconds)3000Number
beforeChangeBefore Index change callback. (oldIndex, newIndex) => ...nullFunction
afterChangeIndex change callback. index => ...nullFunction
durationTransition duration in milliseconds200Number
shiftSet the spacing of the center item0Number
arrowsEnable/disable arrow buttontrueBoolean
arrowsBlocktrueBoolean
arrowsScrollHow many slides to scroll when click arrows button1Number
prevArrowCustom prev arrows buttonnullElement
nextArrowCustom next arrows buttonnullElement
dotsEnable/disable dotsfalseBoolean
dotsClassCSS class for dots"carousel-dots"String
dotsScrollHow many slides to scroll on one page1Number
appendDotsCustom dots templates. Works same as customPaging(dots) => <ul style={{ display: 'block' }}>{dots}</ul>Function
customPagingCustom paging templates(i) => <button type="button">{i + 1}</button>Function
onResziedetect carousel resize(e) => {}Function
onSwipeCallback after slide changes by swiping(direction) => {}Function
accessibilityEnable tabbing and arrow key navigationtrueBoolean
wheelEnable mouse wheel to slide itemfalseBoolean
wheelScrollHow many slides to scroll when wheel trigger1Number

Methods

NameDescription
slickNextGo to the next slide
slickPrevGo to the previous slide
slickGoToGo to any slide
slickPausePause the autoplay
slickPlayStart the autoplay

Development

Want to run demos locally

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

npm

npm install npm run dev

yarn

yarn yarn dev

open http://localhost:8080

GitHub

Recommended