Home > Javascript > Responsive Touch Slider In Vanilla JavaScript – Swipe.js
Responsive Touch Slider In Vanilla JavaScript – Swipe.js

Responsive Touch Slider In Vanilla JavaScript – Swipe.js

Responsive Touch Slider In Vanilla JavaScript – Swipe is the most accurate touch slider. Support both React and Angular.

Swipe

Swipe is the most accurate touch slider. It is extremely lightweight (only 5kb minified) and works across all browsers, including IE7+.

Usage

Swipe is written in vanilla javascript. You may either create a new instance of Swipe using plain javascript or initialize it via the provided jQuery/Zepto method (assuming the library is already loaded on the page).

Markup

<div id="slider" class="swipe">
  <div class="swipe-wrap">
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>

Style

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

Javascript

Vanilla Javascript

var element = document.getElementById('mySwipe');
window.mySwipe = new Swipe(element, {
  startSlide: 0,
  auto: 3000,
  draggable: false,
  autoRestart: false,
  continuous: true,
  disableScroll: true,
  stopPropagation: true,
  callback: function(index, element) {},
  transitionEnd: function(index, element) {}
});
  Website Demo

About admin