https://github.com/betaweb/slidr

A simple JS library to handle HTML sliders
https://github.com/betaweb/slidr

carousel carousel-js carousel-slider javascript js js-library simple slider slider-animation slides slideshow slidr typescript

Last synced: about 2 months ago
JSON representation

A simple JS library to handle HTML sliders

• Host: GitHub
• URL: https://github.com/betaweb/slidr
• Owner: betaWeb
• License: mit
• Created: 2019-12-08T17:01:04.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2020-07-13T22:45:32.000Z (almost 6 years ago)
• Last Synced: 2025-07-21T00:42:43.728Z (11 months ago)
• Topics: carousel, carousel-js, carousel-slider, javascript, js, js-library, simple, slider, slider-animation, slides, slideshow, slidr, typescript
• Language: JavaScript
• Size: 61.5 KB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# SlidR

A simple JS library to handle HTML sliders.

Here is a [live demo](https://codepen.io/betaweb/pen/GRgoKbN).





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

```HTML

```

### Basic usage

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

```HTML



    
Slide #1

    
Slide #2



```


> The slides **MUST HAVE** a `data-slide` attribute.




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

```JS

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