Create a Slideshow - Exercise

Contact Us or call 1-877-932-8228
Create a Slideshow - Exercise

Create a Slideshow

Duration: 20 to 30 minutes.

Open the file index.html in your browser. Use the file jqy-effects/Exercises/js/slideshow.js. Your task is to take a plain HTML page and enhance it with JavaScript by adding a slideshow.

The following steps have already been taken to prepare the slide show:

  1. Move the #slideshow element to the top of the main element.
  2. Add the cycler class to it. This class uses a fixed size and positioning to avoid having the display become "jumpy".
  3. Find all of its li elements.
  4. Set the display of all of the list items to none.

Your task is to implement the fadeIn function to handle the effects aspect of the script.

  1. Fade the slide at the current index in over a few seconds, display it for a second or so, then fade it out.
  2. Start the process all over again by using this function as the callback for the fade out at the end of the chain above.
  3. The last line of code, in place, will reset the index when you reach the end of the elements.


$(document).ready(function() {
	var $slideshow = $('#slideshow');
	var $slides = $slideshow.find('li');
	$slides.css( { 'display': 'none' } );
	var index = 0;
	function fadeIn() {
		$slides.eq(index).fadeIn(3000).delay(1000).fadeOut(500, fadeIn);
		if (++index >= $slides.length) index = 0;

For this exercise, the setup of the situation was already done. Although it is not overly complex, the exact steps necessary depend on a knowledge of how the fading functions in jQuery work. The absolute and relative positioning defined by the style classes ensures that a constant-size container exists, otherwise the rest of the page could shift up and down as different sized items are displayed. The size should be big enough to hold the largest item.

The items are all set to have display: none, to hide them initially, instead of opacity: 0, because the fadeIn function will stop out at whatever opacity was originally set for the element.

The fading in and out is accomplished with a chain of jQuery's fadeIn, delay, and fadeOut, with a callback to run our fadeIn applied at the end. The incrementing of the index and recycling back to the first item can be done after the chain is created - technically that will occur before the fading in takes place, but the fading code will be locked to its item by that point. Therefore the adjusting of the index will occur before the callback is invoked.