Touch-enabled Carousel Slider with Pure JavaScript – zSlider

Category: Javascript , Slider | July 31, 2018
Views Total:5,178 views
Official Page:Go to website
Last Update:July 31, 2018


Touch-enabled Carousel Slider with Pure JavaScript – zSlider


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 class="z-slide-item">
          Slide 2
      <li class="z-slide-item">
          Slide 3

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



  • fix setCompatibleStyle bug, enforce -webkit- prefix

You Might Be Interested In:

One thought on “Touch-enabled Carousel Slider with Pure JavaScript – zSlider

  1. Gustavo Sainz

    Thank you for this slider.
    I have one problem with it.
    In Internet Explorer, the transitions between one and other slider are immediate, not gradually.
    After projection of Slide 1, Slide 2 appears immediately,
    In Google Chrome the change is gradual and very good.
    How it can be solved?
    Thank you again


Leave a Reply