Simple Automatic Image Slideshow Plugin For jQuery

File Size: 5.64 KB
Views Total: 12167
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Simple Automatic Image Slideshow Plugin For jQuery

A minimal jQuery plugin to create an image slideshow that features auto rotation, arrows/bullets navigation and cross-fade effect.

How to use it:

1. Include jQuery library and <code>script.js</code> in the web page.

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="script.js"></script>

2. Wrap your images into a DIV container as follow.

<div id="photos">
  <img src="1.jpg" alt="image_1">
  <img src="2.jpg" alt="image_2">
  <img src="3.jpg" alt="image_3">
  ...
</div>

3. Create next/prev controls for the slideshow. As long as the next and previous slideshow buttons have the id's of 'next' and 'prev', respectively, you can change them to whatever you like. img, span, div button or otherwise.

<span id="prev"></span>
<span id="next"></span>

4. Style the slideshow and controls in your CSS.

#photos {
  position: relative;
  width: 475px;
  height: 264px;
  clear: both;
}

#photos img {
  position: absolute;
  z-index: 0;
}

#photos img.previous { z-index: 1; }

#photos img.current { z-index: 2; }

#switch { cursor: pointer; }

#dots {
  padding: 0;
  margin-left: 160px;
}

#next,
#prev,
#dots li {
  background-image: url('dot.gif');
  background-repeat: no-repeat;
  width: 20px;
  height: 20px;
  cursor: pointer;
}

#dots li {
  background-position: 0 0;
  list-style-type: none;
  display: inline-block;
  margin-right: 10px;
}

#dots li:hover,
#dots li.selected { background-position: -20px 0; }

#next,
#prev {
  position: relative;
  z-index: 1;
  top: -40px;
}

#next {
  float: right;
  background-position: 0 -20px;
}

#prev {
  float: left;
  background-position: -20px -20px
}

5. Done. View <code>script.js</code> for more information.


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