Draggable/Swipeable Slider In Vanilla JavaScript – draggable-slider.js

Preview:

Description:

This is a draggable, swipeable, mobile-friendly, full-width slider component written in vanilla JavaScript.

This component is compatible with all major browsers and doesn’t rely on jQuery or any other 3rd party libraries.

How to use it:

1. Load the Draggable Slider’s JavaScript and CSS files.

<link rel="stylesheet" href="draggable-slider.css" />
<script src="draggable-slider.js"></script>

2. Add as many slides to the draggable slider.

<div id="example" class="draggable-slider">
  <div class="inner">
    <div class="slide">Slide 1</div>
    <div class="slide">Slide 2</div>
    <div class="slide">Slide 3</div>
    ... more slides here ...
  </div>
</div>

3. Initialize the draggable slider.

const mySlider = new DraggableSlider('example');

4. Override the default styles of the slides.

.draggable-slider .inner .slide {
  width: 50vw;
  height: 100%;
}
.draggable-slider .inner > div:nth-of-type(even) {
  background: rgb(62, 123, 255, 0.3);
}
.draggable-slider .inner > div:nth-of-type(odd) {
  background: rgb(105, 255, 110, 0.3);
}
.draggable-slider .inner > div:nth-of-type(even).active {
  background: rgb(62, 123, 255, 1);
}
.draggable-slider .inner > div:nth-of-type(odd).active {
  background: rgb(105, 255, 110, 1);
}

5. Override the default CSS selectors of the draggable slider.

const mySlider = new DraggableSlider('example', 'innerClass', 'sliderClass');