Mobile-friendly Content Carousel Slider with Pure JavaScript – zSlider

Category: Javascript , Slider | July 12, 2018
Author: creeperyang
Views Total: 2,219
Official Page: Go to website
Last Update: July 12, 2018
License: MIT

Preview:

Mobile-friendly Content Carousel Slider with Pure JavaScript – zSlider

Description:

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

Leave a Reply