Mobile-friendly Content Slider In Pure JavaScript – Ratslider

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