Lightweight Fading Slideshow / Carousel Plugin with jQuery - zSlider

zSlider is a lightweight jQuery plugin which provides a simple way to create an image carousel / slideshow with features like looping, auto play, cross-fade transition and auto generated pagination.

How to use it:

1. Import jQuery JavaScript library and the jQuery zSlider plugin into your html page.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="/path/to/zslider-1.0.1.js"></script>

2. The html structure for the slideshow.

<div class="slider">
  <ul class="slider-main">
    <li class="slider-panel"> 
      <img alt="Image Caption" title="Image Caption" src="1.jpg"> 
    </li>
    <li class="slider-panel"> 
      <img alt="Image Caption" title="Image Caption" src="2.jpg"> 
    </li>
    <li class="slider-panel"> 
      <img alt="Image Caption" title="Image Caption" src="3.jpg"> 
    </li>
    <li class="slider-panel"> 
      <img alt="Image Caption" title="Image Caption" src="4.jpg"> 
    </li>
  </ul>
  <div class="slider-extra">
    <ul class="slider-nav">
      <li class="slider-item">1</li>
      <li class="slider-item">2</li>
      <li class="slider-item">3</li>
      <li class="slider-item">4</li>
    </ul>
    <div class="slider-page">
      <a class="slider-pre" href="javascript:;">&lt; 
      <a class="slider-next" href="javascript:;">&gt; 
    </div>
  </div>
</div>

3. Initialize the slideshow by calling the function on the top container.

$('.slider').zslider({
  imagePanels: $('.slider-panel'),
  ctrlItems: $('.slider-item'),
  ctrlItemHoverCls: 'slider-item-selected',
  flipBtn: {
    container: $('.slider-page'),
    preBtn: $('.slider-pre'), 
    nextBtn: $('.slider-next')
  },
  callbacks: {
    animate: function(imagePanels, ctrlItems, fromIndex, toIndex) {
      return true;
    }
  }
});

4. Add the following CSS snippets to your CSS file.

.slider, .slider-panel img, .slider-extra {
  width: 650px;
  height: 413px;
}

.slider {
  text-align: center;
  margin: 30px auto;
  position: relative;
}

.slider-panel, .slider-nav, .slider-pre, .slider-next {
  position: absolute;
  z-index: 8;
}

.slider-panel { position: absolute; }

.slider-panel img { border: none; }

.slider-extra { position: relative; }

.slider-nav {
  margin-left: -51px;
  position: absolute;
  left: 50%;
  bottom: 4px;
}

.slider-nav li {
  background: #3e3e3e;
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  margin: 0 2px;
  overflow: hidden;
  text-align: center;
  display: inline-block;
  height: 18px;
  line-height: 18px;
  width: 18px;
}

.slider-nav .slider-item-selected { background: blue; }

.slider-page a {
  background: rgba(0, 0, 0, 0.2);
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#33000000, endColorstr=#33000000);
  color: #fff;
  text-align: center;
  display: block;
  font-family: "simsun";
  font-size: 22px;
  width: 28px;
  height: 62px;
  line-height: 62px;
  margin-top: -31px;
  position: absolute;
  top: 50%;
}

.slider-page a:HOVER { background: rgba(0, 0, 0, 0.4);  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000, endColorstr=#66000000);
}

.slider-next {
  left: 100%;
  margin-left: -28px;
}

5. Plugin's default settings.

intervalTime: 3000,
step: 1,
imagePanels: $(),
animateConfig: {
  atype: 'fade',
  fadeInSpeed: 500,
  fadeOutSpeed: 1000
},
panelHoverStop: true,
ctrlItems: $(),
ctrlItemActivateType: 'hover' || 'click',
ctrlItemHoverCls: '',
flipBtn: {},
panelHoverShowFlipBtn: true,
callbacks: {
    animate: null
}

---

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