React-Unslider

react-unslider is a simple and modern mobile touch without dependencies slider component for React.

Installation

npm install react-unslider --save-dev

Usage

basic usage

import React from 'react';
import ReactDOM from 'react-dom';
import Unslider from 'react-unslider';

ReactDOM.render(
  <Unslider
    arrow
    nav
    loop
    autoplay
  >
    <Unslider.Item label="1">Slider 1</Unslider.Item>
    <Unslider.Item label="2">Slider 2</Unslider.Item>
    <Unslider.Item label="3">Slider 3</Unslider.Item>
  </Unslider>
);

API

props

| name | type | required | default | description | |------------|-------|--------- |---------|-------------| | width |number | √ | |Slider box's width | | height |number | √ | |Slider box's height | |spaceBetween|number | |0 |Distance between slides in px. | |slidePerView|number | |1 |Number of slides per view (slides visible at the same time on slider's container).| |autoplay |boolean| |false |boolean true to enable autoplay| |loop |boolean| |false |Set to true to enable continuous loop mode| |delay |number | |3000 |Delay between transitions (in ms) when autoplay enabled.| |speed |number | |300 |Duration of transition between slides (in ms)| |easing |string | |linear |transition timing function | |nav |boolean| |false |set true to enable pagination nav| |arrow |boolean| |false |set true to enable arrow handle| |keys |object | |{prev:37,next:39}| set hotkey for prev action and next action | |animation |string | |horizontal|set 'vertical' to make slider transtion vertically| |defaultValue|number | |0 |set initial show slider number| |value |nuber | | |set show slider number| |onChange |function| | |trigger when slider number change |

<Unslider.Item /> props

| name | type | required | default | description | |------------|-------|--------- |---------|-------------| |label |string|React Component| | |label for every slider, you can use it when you want to custom pagination.|

Example

run npm start and open http://localhost:9000

online example: http://lizheming.github.io/react-unslider

License

rect-unslider is released under the MIT license.