Author: | creeperyang |
---|---|
Views Total: | 3,626 views |
Official Page: | Go to website |
Last Update: | July 12, 2018 |
License: | MIT |
Preview:

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