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">
    <div><b>0</b></div>
    <div><b>1</b></div>
    <div><b>2</b></div>
    <div><b>3</b></div>
    ...
  </div>
</div>

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) {}
});

API.

// slide to the previous slide.
mySwipe.prev() 
// slide to the next slide.
mySwipe.next() 
// return the current slide index position.
mySwipe.getPos()
// return the number of slides.
mySwipe.getNumSlides() 
// slide to the position matching the index (integer) (duration: speed of transition in milliseconds).
mySwipe.slide(index, duration): 
// restart the slider with autoplay.
mySwipe.restart()
// stop the slider and disable autoplay.
mySwipe.stop()
// reinitialize swipe.
mySwipe.setup(options)
// enable swipe.
mySwipe.enable()
// disable swipe
mySwipe.disable()
// completely remove the Swipe instance.
mySwipe.kill()

Changelog:

v2.2.17 (05/08/2020)

• Update

v2.2.15 (02/20/2020)

• Update