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.

Features:

• 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="//code.jquery.com/jquery-1.12.0.min.js"></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">
  <ul>
    <li>
      <a href="#"><img src="1.jpg" alt=""></a>
    </li>
    <li>
      <a href="#"><img src="2.jpg" alt=""></a>
    </li>
    <li>
      <a href="#"><img src="3.jpg" alt=""></a>
    </li>
  </ul>
</div>

3. Call the zSlider method on the wrapping element.

$('#image-rotator').zSlider();

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.

$('#image-rotator').zSlider({

  // 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
  width:480,
  height:270
  
});

Change log:

2016-03-04

• JS improvement.

---

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