betaweb / slidr

A simple JS library to handle HTML sliders

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