# rslider

> rslider

Latest version **2.16.3** (published 2018-04-10) · WTFPL license · 0 weekly downloads

## Install

```sh
npm install rslider
pnpm add rslider
yarn add rslider
bun add rslider
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.16.3 |
| Published | 2018-04-10 |
| First published | 2017-05-23 |
| Weekly downloads | 0 |
| License | WTFPL |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >=0.10.0 |
| Dependencies | 0 |
| Unpacked size | 221.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Maintainers | andiwillfly, badtowelie, thedimak |
| Keywords | rslider, mobx, slider, simple, mobx slider, react |

## Links

- npm: https://www.npmjs.com/package/rslider
- Repository: https://github.com/andiwilflly/rslider
- Issues: https://github.com/andiwilflly/rslider/issues
- npm.io page: https://npm.io/package/rslider

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 2.16.3 (latest) — 2018-04-10
- 2.16.2 — 2018-04-06
- 2.16.1 — 2018-04-06
- 2.16.0 — 2018-04-06
- 2.15.23 — 2018-04-06
- 2.15.22 — 2018-04-03
- 2.15.21 — 2018-04-02
- 2.15.12 — 2017-12-15
- 2.15.11 — 2017-12-04
- 2.15.10 — 2017-12-04
- 2.15.9 — 2017-12-04
- 2.15.8 — 2017-12-04
- 2.15.7 — 2017-12-04
- 2.15.5 — 2017-12-01
- 2.15.4 — 2017-11-30
- … 125 more at https://npm.io/package/rslider/versions

## README

🦄🌈

<p align="left">
  <a href="https://npmjs.org/package/rslider">
    <img src="https://img.shields.io/npm/v/rslider.svg?style=flat-square">
  </a>

  <a href="https://npmjs.com/package/rslider">
    <img src="https://img.shields.io/npm/dm/rslider.svg">
  </a>
</p>


---

> Simple, scalable slider for React mobx projects.


## Install

```sh
$ npm install rslider --save
```

Make sure that all dependency packages is fetched and installed.

## Styles
You can find styles for rSlider in: `node_modules/rslider/rslider.css`

## API
| Propety | Default value | Description |
| --- | --- | --- |
| name | 'rSlider' | Each rSlider must have unique name |
| className | ' ' | Custom class that can be added to .rslider DOM element |
| style | ' ' | Custom styles that can be added to .rslider DOM element |
| devMode | false | Allow you to debug **rSlider** mobx model right from you slider |
| media | false | Add **mediaQueries** support to **rSlider** (See **media** usage example on the bottom) |
| customAnimation | false | Allow you to run css3 animations from https://daneden.github.io/animate.css or you own. *(Only for slideToShow === 1)* |
| currentStep | 0 | You can start **rSlider** from any slide you want |
| itemsShow | 1 | Number of **rSlider** items that will be shown on the same time |
| itemsScroll | 1 | Number of **rSlider** items that will be scroll on each step change |
| infinity | true | **rSlider** has infinity loop as default |
| draggable | false | **rSlider** can be draggable *(except cases, when customAnimation === true)* |
| draggableSensitivity | 10 | Only for enabled **infinity** mode. You can set any value from 0 to 100. The more draggableSensitivity, the more difficult to drag the slider to the next step |
| autoPlay | false | Allow you slide change step on each 7000ms. Can be customized inside [rSliderItem] component. See examples below |
| onReady | (slider)=>{} | Callback, that fire right after **rSlider** rendered |
| onStepChange | (slider)=>{} | Callback, that fire right after **rSlider** step changes. Returns **rSlider** model as first argument |
| onDragEnd | (slider,draggable)=>{} | Callback, that fire right after **rSlider** drag event ends. Returns **rSlider** model as first argument and **draggable** state object as the second |
| stickOut | 0 | Allows you to show some part of the next slide. That number converts in pixels |
| stopOnHover | false | Allows you to stop rSlider [autoplay] on mouseover event (works only if [autoPlay] enabled) |


## Usage

- Controls
- Pagination
```js
    import rSlider from 'rslider';
    const {RSlider, RSliderArrowL, RSliderArrowR, RSliderItems, RSliderPagination} = rSlider;
    
    <RSlider name="example1">
        <RSliderItems>
            <div>item 1</div>
            <div>item 2</div>
        </RSliderItems>

        <RSliderArrowL />
        <RSliderArrowR />
        <RSliderPagination />
    </RSlider>
```
----

- **autoPlay**
- custom **itemsShow** count
- custom **itemsScroll** count
```js
    <RSlider name="example2"
             itemsShow="2"
             itemsScroll={2}>
        <RSliderItems>
            <div>item 1</div>
            <div>item 2</div>
        </RSliderItems>
    </RSlider>
```
----

- **draggable**
- custom **style**
- custom **className**
```js
    <RSlider name="example3"
             draggable
             className="example-class-name"
             style={{ background: 'lightgray' }}>
        <RSliderItems>
            <div>item 1</div>
            <div>item 2</div>
        </RSliderItems>
    </RSlider>
```
----


- custom animation from https://daneden.github.io/animate.css
- Controls
- on control click callbacks
```js
    <RSlider name="example4"
             customAnimation='fadeOutUp_fadeInDown'>
        <RSliderItems>
            <div>item 1</div>
            <div>item 2</div>
        </RSliderItems>
        <RSliderArrowL onClick={ ()=> console.log('arrowL clicked!') } />
        <RSliderArrowR onClick={ ()=> console.log('arrowR clicked!') } />
    </RSlider>
```
----


- development mode **on**
- media
    - from 0 to 499px default settings + **background: 'red'**
    - from 500 to 999 - itemsShow = 2, itemsScroll = 2,  background = 'green'
    - from 1000 - itemsShow = 3, itemsScroll = 3,  background = 'violet'

```js
<RSlider name="example5"
         devMode
         style={{ background: 'red' }}
         media={{
            [`*500`]: {
                itemsShow: 2,
                itemsScroll: 2,
                style: { background: 'green' }
            },
            ['500*1000']: {
                itemsShow: 3,
                itemsScroll: 3,
                style: { background: 'violet' }
            }
         }}>
    <RSliderItems style={{ textAlign: 'center' }}>
        <p>1</p>
        <p>2</p>
        <p>3</p>
    </RSliderItems>

    <RSliderArrowL />
    <RSliderArrowR />
</RSlider>
```
----

- autoPlay
    - custom **autoPlay** duration for slide 2, 3
- deep nested Arrow left control
```js
    <RSlider name="example6"
             autoPlay>
        <RSliderItems>
            <div>item 1</div>
            <div data-duration={1000}>item 2</div>
            <div data-duration={6700}>item 3</div>
        </RSliderItems>
        <div>
             <RSliderArrowL />
        </div>

    </RSlider>
```

---
_Source: https://npm.io/package/rslider · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._