Touch-enabled Carousel Slider with Pure JavaScript – zSlider

Category: Javascript , Slider | July 31, 2018
Author: creeperyang
Views Total: 3,703
Official Page: Go to website
Last Update: July 31, 2018
License: MIT

Preview:

Touch-enabled Carousel Slider with Pure JavaScript – zSlider

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

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

  1. Gustavo Sainz

    HI
    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
    Gustavo

    Reply

Leave a Reply