rslider v2.16.3

🦄🌈

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

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>