Author: | rantasma |
---|---|
Views Total: | 1,124 views |
Official Page: | Go to website |
Last Update: | August 19, 2020 |
License: | MIT |
Preview:

Description:
Ratslider is a vanilla JavaScript slider plugin to help developers create a responsive, touch-enabled content carousel from plain HTML structure.
How to use it:
Link to the Ratslider’s JavaScript ratslider.js
and Stylesheet ratslider.css
.
<link rel="stylesheet" href="ratslider.css"> <script src="ratslider.js"></script>
Create the HTML for the carousel.
<div id="ratslider" class="ratslider"> <div class="slide"> <h1>1</h1> </div> <div class="slide"> <h1>2</h1> </div> <div class="slide"> <h1>3</h1> </div> <div class="slide"> <h1>4</h1> </div> </div>
Initialize the carousel with options.
const myCarousel = new Ratslider({ id: '#ratslider', slides: '.slide', create: true });
Enable/disable navigation/pagination controls.
const myCarousel = new Ratslider({ id: '#ratslider', slides: '.slide', create: true, dots: true, handlers: true });
Enable/disable drag & touch swipe events.
const myCarousel = new Ratslider({ id: '#ratslider', slides: '.slide', create: true, draggable: true });
Changelog:
08/19/2020
- Update ratslider.js