1.1.14 • Published 8 years ago
react-es6-slider v1.1.14
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-slider
npm run demo:watch
Open http://localhost:5000/Usage
class BasicExample extends Component {
constructor(props) {
super(props);
}
render() {
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 = require('../scss/example.scss');
const dummyData = [1, 2, 3, 4, 5];
return (
<div className='container'>
<ReactSlider {...sliderSettings}>
{
dummyData.map((item, index) => {
return (
<div className='sliderItem' key={index}>
{ item }
</div>
)
})
}
</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/`1.1.14
8 years ago
1.1.13
8 years ago
1.1.12
8 years ago
1.1.11
8 years ago
1.1.10
8 years ago
1.1.9
8 years ago
1.1.8
8 years ago
1.1.7
8 years ago
1.1.6
8 years ago
1.1.5
8 years ago
1.1.4
8 years ago
1.1.3
8 years ago
1.1.2
8 years ago
1.1.1
8 years ago
1.1.0
8 years ago
1.0.8
8 years ago
1.0.7
8 years ago
1.0.6
8 years ago
1.0.5
9 years ago
1.0.4
9 years ago
1.0.3
9 years ago
1.0.2
9 years ago
1.0.1
9 years ago
1.0.0
9 years ago