Simplest Automatic Image Slideshow With jQuery - slideshow.js

A dead simple jQuery slideshow script for cycling through a group of images with a dot indicator. Every 4 seconds(excluding the 500ms slide effect), slide to the next image, and set the appropriate circle (dot) to be brown.

How to use it:

1. Name your slides with the naming format "slideshowX.png", where the X is the position the slide is in. All "slideshowX.png" files must be in the slides folder. You need to set NUMBER_OF_SLIDES to the number of files in the previously mentioned folder.

2. Create a new img element for each slide, and point it to the file, like so:

<div id="slideshow">
  <img src="slideshow1.png"></img>
  <img src="slideshow2.png"></img>
  <img src="slideshow3.png"></img>
</div>

3. Create new circles beneath the slideshow to match the number of images in the slideshow. Make sure that the id of each circle is set as below

<div style="text-align: center">
  <div id="circle1" class="circle"></div>
  <div id="circle2" class="circle"></div>
  <div id="circle3" class="circle"></div>
</div>

4. The required CSS styles for the slideshow.

#slideshow {
  margin-bottom: 5px;
  width: 740px;
  height: 300px;
  overflow: hidden;
  white-space: nowrap;
}

#slideshow img {
  display: inline-block;
  width: 100%;
  height: 100%;
}

.circle {
  margin-right: 15px;
  display: inline-block;
  background-color: lightgrey;
  width: 12px;
  height: 12px;
  border-radius: 50px;
}

5. Include jQuery library and the jQuery slideshow.js script and done.

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

6. Override the default parameters in the jQuery slideshow.js script.

//the slideshow code uses this to determine a few things. Make sure this is set correctly!      
const NUMBER_OF_SLIDES = 3;

//get the width of the side-scrollable area in the 'sldieshow' div and divide by NUMBER_OF_SLIDES so that the 
//scrollLeft under setInterval knows by how much to scroll
var slide_width = document.getElementById('slideshow').scrollWidth / NUMBER_OF_SLIDES; 

//used as a reference for what slide to switch to in the coming setInterval()
var slide_number = 1; 

---

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