Wondering what’s next for npm?Check out our public roadmap! »

    @betaweb/slidr
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.10 • Public • Published

    SlidR

    A simple JS library to handle HTML sliders.

    Here is a live demo.



    Getting started

    Installation

    To install SlidR, you just have to download Slidr.min.js in the dist folder and add a script into your HTML page :

    <script src="path/to/Slidr.min.js"></script>

    Basic usage

    Here a basic HTML form with a .slider element contains 2 slides :

    <div class="slider">
        <div data-slide="slide1" class="slide">Slide #1</div>
        <div data-slide="slide2" class="slide">Slide #2</div>
    </div>

    The slides MUST HAVE a data-slide attribute.


    And you just have to instanciate SlidR, add your slides and run it :

    document.addEventListener('DOMContentLoaded', () => {
        const slider = new Slidr()
        slider
            .add({name: 'slide1', timeout: 20 * 1000})
            .add({name: 'slide2', timeout: 10 * 1000})
            .run()
    })

    And.. voilà ! You have a fully functional slider ! :)


    Options & Events

    Coming soon

    Install

    npm i @betaweb/slidr

    DownloadsWeekly Downloads

    5

    Version

    1.0.10

    License

    MIT

    Unpacked Size

    96.8 kB

    Total Files

    22

    Last publish

    Collaborators

    • avatar