Responsive Touch Slider In Vanilla JavaScript – Swipe.js

Category: Javascript , Recommended , Slider | November 25, 2016
Author: lyfeyaj
Views Total: 1,944
Official Page: Go to website
Last Update: November 25, 2016
License: MIT

Preview:

Responsive Touch Slider In Vanilla JavaScript – Swipe.js

Description:

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,
  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():

// completely remove the Swipe instance.
mySwipe.kill():