React infinite slide
if you just want infinite slider, this is is for you
Feature
- swipe support
- autopaly
- alow custom arrow and dots
Demo
Install
npm install react-infinite-slide
Components
Slides
The slides wrapper
props | description | type | default |
---|---|---|---|
width | width of wrapper and slides | String | "600px" |
height | height of wrapper and slides | String | "400px" |
duration | transition duration | Number | 300 |
autoplay | should autoplay the slides | Bool | false |
delay | the autoplay delay of between slides | Number | 1000 |
arrowLeft | the left arrow component constructor | ReactComponent | null |
arrowRight | the right arrow compnent constructor | ReactComponent | null |
dots | the dots component constructor | React Component | null |
Example
import ArrowLeft ArrowRight Dots Slides from 'react-infinite-slide'; { return <Slides = = = => <div ="one"></div> <div ="two"></div> <div ="three"></div> </Sildes> ;}
ArrowLeft
This is default left arrow component, you can pass it to Slides
as
props of arrowLeft
, or you can custom your ArrowLeft
component,
Slides
will inject onClick
as props, and you MUST call it
when arrow is be clicked.
Example
{ return <div =
ArrowRight
This is default right arrow component, you can pass it to Slides
as
props of arrowRight
, or you can custom your ArrowRight
component
like ArrowLeft
Dots
This is default dots component, you can pass it to Slides
as props of dots
,
or you can custom your Dots
component, Slides
will inject onClick
to
it and you MUST call props.onClick(index)
when dot is be clicked. parameter
index
is the index of the slide, SHOULD start from 0, like below example
Example
Component { return this isprops } { return <ul> <li ="0" =.()></li> <li ="1" =.()></li> <li ="2" =.()></li> </ul> ; }
Todo
- fix bug of transition overlap