React-es6-slider
React ES6 Slider
Screenshots
Demo Link
https://www.urbanclap.com/ Scroll down a bit to see a list of sliders
Install
npm install --save react-es6-slidernpm run demo:watchOpen http://localhost:5000/
Usage
{ superprops; } { const sliderSettings = slidesToShow: 3 slidesToScroll: 1 infinite: false slideWidth: 300 gutterSpace: 40 leftArrowClass: 'fa fa-arrow-circle-o-right' rightArrowClass: 'fa fa-arrow-circle-o-right' ; const styles = ; const dummyData = 1 2 3 4 5; return <div className='container'> <ReactSlider ...sliderSettings> dummyData </ReactSlider> </div> ; }
Name | Type | Default | Description |
---|---|---|---|
slidesToShow | Number | 3 |
Number of slides to be shown |
slidesToScroll | Number | 1 |
Number of slides to be scroll when slided |
slideWidth | Number | 300 |
Width of slide |
initialSlide | Number | 0 |
Initial Slide(starting point) |
gutterSpace | Number | 30 |
space between sliders |
children | Any | `` | Slider items that you want to slide(Automatically taken) |
isMobile | Boolean | false |
Is the slider for mobile |
boolRenderLater | Boolean | false |
Initialize the slider after this property is passed again later as true |
hideArrows | Boolean | `` | Hide the arrows |
sliderBoxClass | String | `` | Class to be applied on container for the slider |
slideItemClass | String | `` | Class to be applied on slider items |
slidesTrackClass | String | `` | Class to be applied on the slider track(below slider box and contains all the slider items) |
leftArrowClass | String | `` | Class to be applied on left arrow |
rightArrowClass | String | `` | Class to be applied on right arrow |
disableStateArrowClass | String | `` | Class to be applied on arrows when disabled |
onLeftArrowClick | Function | `` | Function to be called on click of left arrow |
onRightArrowClick | Function | `` | Function to be called on click of right arrow |
## Example
`npm run demo:watch` and then go to `http://localhost:5000/`