More Simple jQuery Slideshows

Over 4 years ago, I wrote a really simple slideshow script using jQuery. It just took a bunch of images of the same dimensions and cycled through them. The code is only a few lines long (jQuery notwithstanding).

Since that time, however, people have often asked for variations. I've updated the demo page with most requested variations.

Linking the Slides

Sure the images rotated but you know what's even better? Being able to link the images to specific pages! This was by far the most popular request. The original code was very specific to images. With a few minor tweaks, the script could be made to cycle through all child elements, whether they're images, divs, or links.

$('.fadelinks > :gt(0)').hide();
  setInterval(function(){
    $('.fadelinks > :first-child').fadeOut()
     .next().fadeIn().end()
     .appendTo('.fadelinks');
  }, 3000);
});

References to img elements begone! The CSS also needs a minor tweak to target the child elements. I used this child selector, which means that if you have to support IE6, you'll need to make some more CSS adjustments to make it work.

.fadelinks { position:relative; height:332px; width:500px; }
.fadelinks > * { position:absolute; left:0; top:0; display:block; }

Random Images

Having the images go 1-2-3 is a little too predictable for some. Wouldn't it be nice if it could be randomized? This required a bit more work but barely. Imagine the images are like a deck of cards. I take the top card and put it on the bottom of the deck. Then I pick a random card and move it to the top of the deck. Repeat.

  $('.faderandom > :gt(0)').hide();
  setInterval(function(){
    var rand = Math.floor(Math.random() * ($('.faderandom').children().length-1));
    $('.faderandom > :first-child').appendTo('.faderandom').fadeOut();
    $('.faderandom > *').eq(rand).prependTo('.faderandom').fadeIn();
  }, 3000);

First, I need to get a random number. I use this with jQuery's eq() method to pick a card from the deck and move it to the front of the deck with prependTo(). This is still a tiny amount of jQuery to pull this off.

Multiple Slideshow

My original script was very simple and only worked if there was only one slideshow on the page. You had to copy/paste the script multiple times changing just the class name to point to the new slideshow. That's not very DRY.

Now I started writing more code than I really felt comfortable with. There's probably a more elegant way to do this but I put this together really quickly. And, well, it still works. This time, I loop through each slideshow and store the currently selected slideshow in a closure for use within the setInterval call.

$('.multipleslides').each(function(){
  // scope everything for each slideshow
  var $this = this;
  $('> :gt(0)', $this).hide();
  setInterval(function(){
    $('> :first-child',$this).fadeOut()
      .next().fadeIn().end()
      .appendTo($this);
  }, 3000);
})

And that's it! More simple slideshows.

For more Snook.ca slideshows:

• Simplest jQuery Slideshow
• Simplest JavaScript Slideshow
• Simplest CSS Slideshow