Touch-enabled Carousel Slider with Pure JavaScript – zSlider

Preview:

Description:

zSlider is a pure JavaScript library which takes a list of html elements and then converts them into a responsive, touch-enabled carousel slider.

More features:

• Auto sliding on initialize.
• Allows to slide through html elements via mouse drag or touch swipe.
• Custom transition speed and delay.

How to use it:

Download the zSlider, unzip it and include the zSlider.css and zSlider.js on the webpage.

<link rel="stylesheet" href="styles/zSlider.css">
<script src="scripts/zSlider.js"></script>

Create a list of html content you wish to slide through.

<div class="z-slide-wrap" id="demo">
  <ul class="z-slide-content">
      <li class="z-slide-item">
          Slide 1
      </li>
      <li class="z-slide-item">
          Slide 2
      </li>
      <li class="z-slide-item">
          Slide 3
      </li>
  </ul>
</div>

Create a new slider instance.

var sliderdemo = new Slider('#demo', '.z-slide-item', {
    // options here
});

Possible slider options.

// initial slide
'current': 0, 
// transition delay
'duration': 0.8, 
// minimum percent to trigger the sliding
'minPercentToSlide': null, 
// auto play
'autoplay': true,
// left or right
'direction': 'left', 
// transition delay
'interval': 5 // 5 seconds

Changelog:

v0.0.3

• fix setCompatibleStyle bug, enforce -webkit- prefix