Creating a Basic jQuery Slideshow

Thursday, April 1, 2010 1:39:51 PM

I needed a basic slideshow/image rotator with just the features I wanted and nothing more, and I needed a good excuse to play with jQuery. Here's the result of satisfying both of those needs. Look forward to another article that will expand upon this basic slideshow with pausing, text and navigation controls. Until then, enjoy.

To get started we need to create a basic html file, we’ll call it SlideShow.html Here’s how it should look.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
<html xmlns="" xml:lang="en">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>jQuery Slideshow Demo</title>
<meta name="Author" content="Ryan T. Hilton" />

Add jQuery from Google by placing this in your <head> section

	<script type="text/javascript" src=""></script>

We also need to add some styles to the page. Create a file called style.css and add this to the <head> section.

	<link rel="stylesheet" type="text/css" href="style.css" />

And now we’ll add some basic styles to style.css

		background-color: rgb(45,45,45);
		width: 500px;
		margin: 20px auto;
		border: 4px solid rgb(255,255,255);
		background-color: rgb(200,200,200);
		color: rgb(45,45,45);
		position: relative;
		height: 309px;
		margin: 0;
		padding: 0;
		list-style: none;
		position: relative;
	#slideshow li
		float: left;
		position: absolute;

Now, let’s setup the HTML for the slideshow. Add this between the <body> and </body> tags. Just add an extra <li> for each image.

	<div class="Container">
		<ul id="slideshow">
				<img src="Images/Image1.jpg" width="500" height="309" />
				<img src="Images/Image2.jpg" width="500" height="309" />
				<img src="Images/Image3.jpg" width="500" height="309" />

Let’s create a new .js file and add it to the <head> section now as well. We’ll call it SlideShow.js and place it in the same directory as the html file

	<script type="text/javascript" src="SlideShow.js"></script>

Now, we can start with the basics of the JavaScript. The rest of this will be done in SlideShow.js
First lets set up some variables to configure the behavior.

	var fadeTime = 1200; // Fade in/out each image over 1.2 seconds
	var pauseTime = 4000; // Pause on each image for 4 seconds

Now we need to setup a few internal variables that we’ll use to maintain the state of the slideshow.

	var current = 0; // Current index
	var cur; // Stores current item
	var next; // Stores next item
	var timer; // Used for starting/stopping the rotation
	var size = 0; // Stores the number of items to rotate
	var paused = false; // Are we paused?

How about we get started making things work? We’ll start by creating an initialization function. This will get everything setup and start the rotation.

	function StartSlideShow()
		// Hide all of the items
		$('ul#slideshow > *').css("display", "none")
		.css("left", "0")
		.css("top", "0")
		.css("position", "absolute");

		// Display the first item
		$('ul#slideshow li:first').css("display", "block")
		.css("left", "0")
		.css("top", "0")
		.css("position", "absolute");

		// Set size variable to number of items
		size = $('ul#slideshow li').size();
		// Start the rotation timer

	function StartTimer()
		// Make sure we have a clean slate
		// Call Switch() every x milliseconds
		interval = setInterval(‘Switch()', pauseTime);

	function Switch()
		cur = ($(‘ul#slideshow li’).eq(current));
		// Check to see if we are at the end of the list
		if ((current + 1) == size)
			next = ($('ul#slideshow li').eq(0));
			current = 0;
			next = ($('ul#slideshow li').eq(current + 1));
			current = current + 1;
		// Fade between the images

Ok, we are all done with SlideShow.js for now. Let’s go back to our SlideShow.html file. In the head section, add the following. This will tell jQuery to run StartSlideShow() when the page is loaded.

<script type=”text/javascript”>
	$(document).ready(function() {

You should now be able to run your slideshow by opening the HTML file in your favorite browser.

View Demo


Leave Comment




Are you human? Prove it!