Mobile-friendly Content Carousel Slider with Pure JavaScript – zSlider

zSlider is a pure JavaScript library intended to create an automatic content carousel / slider that supports desktop mouse drag and mobile touch swipe events.

Basic usage:

Add the required stylesheet in the document’s head section.

<link rel="stylesheet" href="styles/zSlider.css">

Create a list of content / images for the carousel slider.

<div class="z-slide-wrap" id="demo">
  <ul class="z-slide-content">
    <li class="z-slide-item"> <a href="#">
      <h3>Content 1</h3>
      </a> </li>
    <li class="z-slide-item"> <a href="#">
      <h3>Content 2</h3>
      </a> </li>
    <li class="z-slide-item"> <a href="#">
      <h3>Content 3</h3>
      </a> </li>
  </ul>
</div>

Include the zSlider.js at the bottom of the document.

<script src="scripts/zSlider.js"></script>

Initialize the content carousel slider.

var slider1 = new Slider('#demo', '.z-slide-item', {
    // OPTIONS HERE
});

Configuration options.

var slider1 = new Slider('#demo', '.z-slide-item', {
    // initial slide
    'current': 0,
    // animation speed
    'duration': 0.8, 
    // min percentage to trigger the slide
    'minPercentToSlide': null,
    // auto play
    'autoplay': true,
    // slide direction
    'direction': 'left',
    // autoplay interval
    'interval': 5 
    
});

Changelog:

07/12/2018

• v0.0.4: fix setCompatibleStyle bug, enforce -webkit- prefix