rslider

🦄🌈

---

Simple, scalable slider for React mobx projects.

Install

$ 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

    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

    <RSlider name="example2"
             itemsShow="2"
             itemsScroll={2}>
        <RSliderItems>
            <div>item 1</div>
            <div>item 2</div>
        </RSliderItems>
    </RSlider>

---

• draggable
• custom style
• custom className

    <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

    <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'

<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

    <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>