1.1.14 • Published 6 years ago

react-es6-slider v1.1.14

Weekly downloads
5
License
ISC
Repository
github
Last release
6 years ago

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>
    );
  }
}
NameTypeDefaultDescription
slidesToShowNumber3Number of slides to be shown
slidesToScrollNumber1Number of slides to be scroll when slided
slideWidthNumber300Width of slide
initialSlideNumber0Initial Slide(starting point)
gutterSpaceNumber30space between sliders
childrenAny | Slider items that you want to slide(Automatically taken)
isMobileBooleanfalseIs the slider for mobile
boolRenderLaterBooleanfalseInitialize the slider after this property is passed again later as true
hideArrowsBoolean | Hide the arrows
sliderBoxClassString | Class to be applied on container for the slider
slideItemClassString | Class to be applied on slider items
slidesTrackClassString | Class to be applied on the slider track(below slider box and contains all the slider items)
leftArrowClassString | Class to be applied on left arrow
rightArrowClassString | Class to be applied on right arrow
disableStateArrowClassString | Class to be applied on arrows when disabled
onLeftArrowClickFunction | Function to be called on click of left arrow
onRightArrowClickFunction | Function to be called on click of right arrow
## Example

`npm run demo:watch` and then go to `http://localhost:5000/`
1.1.14

6 years ago

1.1.13

6 years ago

1.1.12

7 years ago

1.1.11

7 years ago

1.1.10

7 years ago

1.1.9

7 years ago

1.1.8

7 years ago

1.1.7

7 years ago

1.1.6

7 years ago

1.1.5

7 years ago

1.1.4

7 years ago

1.1.3

7 years ago

1.1.2

7 years ago

1.1.1

7 years ago

1.1.0

7 years ago

1.0.8

7 years ago

1.0.7

7 years ago

1.0.6

7 years ago

1.0.5

7 years ago

1.0.4

7 years ago

1.0.3

7 years ago

1.0.2

7 years ago

1.0.1

7 years ago

1.0.0

7 years ago