Basic Automatic Slideshow / Carousel Plugin For jQuery

Just another simple jQuery plugin to create an auto-rotating slideshow / carousel for an array of images. You can also switch between two of these images by hovering over the bullet pagination.

How to use it:

1. Load the slideshow.js script after jQuery library but before the closing body tag.

<script src="js/jquery.min.js"></script>
<script src="js/slideshow.js"></script>

2. Create an empty DIV element that will be served as the container for your slideshow.

<div id="slideShow"></div>

3. Call the function on the DIV element and insert an array of images into the slideshow using slides option.

$("#slideShow").slideShow({

  slides: [
      {image: '<img src="1.jpg">', href:"#"},
      {image: '<img src="2.jpg">', href:"#"},
      {image: '<img src="3.jpg">', href:"#"}
  ]
  
});

4. Add your own CSS styles to the slideshow.

#slideShow {
  position: relative;
  overflow: hidden;
  width: 600px;
  height: 375px;
  margin: 0;
  padding: 0;
  cursor: pointer;
}

#slideShow ol,
#slideShow ol li {
  margin: 0;
  padding: 0;
}

#slideShow ol {
  position: relative;
  list-style: none;
}

#slideShow ol li { float: left; }

#slideShow .dots {
  display: block;
  position: absolute;
  bottom: 15px;
  width: 100%;
  height: 20px;
  margin: 0;
  padding: 0;
  text-align: center;
}

#slideShow ul.dots li {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin: 0 4px;
  background-color: #aaa;
  border-radius: 6px;
  text-indent: -9999px;
}

#slideShow ul li.active { background-color: #fff; }

5. Configuration options with default values.

// transition delay
delay: 5000,

// animation duration
duration: 250,

// show pagination dots
showDots: true,

// enable touch support
touch: true,

// callback
complete: function(){},

// an array of images
slides: []

---

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