Nimble Porridge Muncher

    smart-slider

    1.0.2 • Public • Published

    smart-slider

    A library of slider based on touch events.

    Install

    Using unpkg CDN

    <script src="https://unpkg.com/smart-slider@1.0.2/index.js"></script>
    

    Using npm

    npm install smart-slider --save-dev

    Usage

    The most common application scenario of smart-slider is banner sliding. Let's see its HTML:

    <div classe="ctx">
        <ul class="slider">
            <li class="slider__item"><img src="/path/to/your/project/images/item1.png"/></li>
            <li class="slider__item"><img src="/path/to/your/project/images/item2.png"/></li>
            <li class="slider__item"><img src="/path/to/your/project/images/item3.png"/></li>
        </ul>
    </div>
    

    Example-CDN

    <style>
        .ctx {
            position: relative;
        	overflow: hidden;
        	width: 100%;
            height: 100px;
        }
        .slider {
            font-size: 0;
            background-color: #fff;
            white-space: nowrap;
        }
        .slider__item {
            display: inline-block;
            width: 750px;
            height: 100%;
            vertical-align: top;
        }
    </style>
    <div classe="ctx">
        <ul class="slider">
            <li class="slider__item"><img src="/path/to/your/project/images/item1.png"/></li>
            <li class="slider__item"><img src="/path/to/your/project/images/item2.png"/></li>
            <li class="slider__item"><img src="/path/to/your/project/images/item3.png"/></li>
        </ul>
    </div>
    <script>
        var slider = new Slider({
            container: 'slider',
            item: 'slider__item'
        })
    </script>
    

    Example-CommonJS

    const smartSlider = require('smart-slider');
    const slider = new smartSlider({
        container: 'slider',
        item: 'slider__item'
    });
    

    Options

    • container: The container of slider, DOM element className.(required)
    • item: The item of slider, DOM element className.(required)
    • auto: Auto sliding, default is false.(optional)
    • autoTime: Auto sliding interval, default is 3000ms.(optional)
    • rate: The rate of Displacement/Time, can be understood sensitivity, the smaller value, the slider is more sensitive, the value is open interval 0 to 1, default is 0.5.(optional)
    • scale: The scale of items not shown, default is 1, that means no scaling. The value is open interval 0 to closed interval 1.(optional)
    • getIndexCallback: A callback function, send current position of item display.(optional)

    Method

    remove all event listener and timer.

    slider.removeAllListener()

    Notice

    If you use smart-slider in SPA, you must remove the associated event listener before the component is uninstalled. Like this => slider.removeAllListener().

    License

    smart-slider is MIT licensed.

    Install

    npm i smart-slider

    DownloadsWeekly Downloads

    10

    Version

    1.0.2

    License

    MIT

    Unpacked Size

    27.2 kB

    Total Files

    6

    Last publish

    Collaborators

    • amoydreamer