Lightweight Automatic Image Rotator Plugin - zSlider.js

File Size: 4.23 KB
Views Total: 2075
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Lightweight Automatic Image Rotator Plugin - zSlider.js

zSlider.js is a tiny and easy-to-use jQuery image rotator plugin that slides (or fade) through an arbitrary number of images at a given speed.


  • Custom transition interval.
  • Supports both slide and fade animations.
  • Hover over the navigation dots to switch images.
  • Infinite looping.

How to use it:

1. Download and place the jQuery zSlider.js script after jQuery JavaScript library.

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

2. Create a list of images and the wrap them into a container element.

<div id="image-rotator">
      <a href="#"><img src="1.jpg" alt=""></a>
      <a href="#"><img src="2.jpg" alt=""></a>
      <a href="#"><img src="3.jpg" alt=""></a>

3. Call the zSlider method on the wrapping element.


4. Apply the following CSS styles to the image rotator.

#image-rotator {
  position: relative;
  overflow: hidden;
  z-index: 888;

#image-rotator ul {
  list-style: none;
  position: absolute;
  left: 0;
  top: 0;

#image-rotator ul li {
  float: left;
  position: relative;

#image-rotator ul li img {
  width: 100%;
  height: 100%;

#image-rotator ol {
  position: absolute;
  bottom: 15px;
  right: 10px;
  list-style: none;
  z-index: 999;

#image-rotator ol li {
  width: 10px;
  height: 10px;
  float: left;
  margin: 5px;
  border-radius: 50%;
  cursor: pointer;
  background-color: #fff;

#image-rotator ol li.on { background: #FF5C1B; }

5. Options and defaults.


  // interval time in ms
  interval: 4000,

  // 'a': horizontal sliding
  // 'b': vertical sliding
  // 'c': cross fading
  turnTo: "c",

  // shows pagiantion
  paper: true,

  // width and height of the rotator

Change log:


  • JS improvement.

This awesome jQuery plugin is developed by yaxizhl. For more Advanced Usages, please check the demo page or visit the official website.