Responsive Touch Slider In Vanilla JavaScript – Swipe.js

Category: Javascript , Recommended , Slider | May 8, 2020
Author: lyfeyaj
Views Total: 4,711 views
Official Page: Go to website
Last Update: May 8, 2020
License: MIT


Responsive Touch Slider In Vanilla JavaScript – Swipe.js


Swipe.js is a pure Vanilla JavaScript plugin used for create a responsive, cross-platform that supports any web content and comes with lots of options & API.

Also can be implemented as a component for AngularJS and ReactJS.

More features:

  • Smooth transition effects based on CSS3 transforms.
  • Custom animation speed.
  • Continuous sliding.
  • Supports both drag and touch events.
  • Callbacks.
  • Autoplay.

How to use it:

Include the swipe.js script in the document and the slider is ready for use.

<script src="swipe.js"></script>

Create a group of slide content as this:

<div id="mySwipe" class="swipe">
  <div class="swipe-wrap">

Create prev/next navigation buttons for the slider.

<a class="btn btn-primary" id="prev">Prev</a>
<a class="btn btn-primary" id="next">Next</a>

Initialize the slider with default options.

var element = document.getElementById('mySwipe'),
    prevBtn = document.getElementById('prev'),
    nextBtn = document.getElementById('next');

window.mySwipe = new Swipe(element, {
  // options here

The required CSS styles for the slider.

.swipe {
  overflow: hidden;
  visibility: hidden;
  position: relative;

.swipe-wrap {
  overflow: hidden;
  position: relative;

.swipe-wrap > div {
  float: left;
  width: 100%;
  position: relative;

Customize the slider with the following options.

window.mySwipe = new Swipe(element, {
  startSlide: 0,
  speed: 400,
  auto: 3000,
  draggable: false,
  continuous: true,
  autoRestart: false,
  disableScroll: false, // prevent touch events from scrolling the page
  stopPropagation: false, 
  callback: function(index, elem, dir) {},
  transitionEnd: function(index, elem) {}


// slide to the previous slide.

// slide to the next slide. 

// return the current slide index position.

// return the number of slides.

// slide to the position matching the index (integer) (duration: speed of transition in milliseconds).
mySwipe.slide(index, duration): 

// restart the slider with autoplay.

// stop the slider and disable autoplay.

// reinitialize swipe.

// enable swipe.

// disable swipe

// completely remove the Swipe instance.


v2.2.17 (05/08/2020)

  • Update

v2.2.15 (02/20/2020)

  • Update

You Might Be Interested In:

Leave a Reply