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:

Published February 19, 2014 · Updated February 19, 2014
Categorized as JavaScript
Short URL: http://snook.ca/s/1030

Conversation

6 Comments · RSS feed
Spide said on March 07, 2014

nice :)

harryllama said on March 08, 2014

Any simple way to add captions to each image?

Jonathan Snook said on March 09, 2014

@harryllama: Use the code from the Linking the Slides section and add a <span> inside the <a> for the caption. Use CSS to style.

harryllama said on March 11, 2014

Thanks, that works! I guess using the # sign in the link keeps it from going anywhere.

Ashley said on March 25, 2014

Hey, I have one slideshow working on hover, but is there a way to make multiple slideshows work on hover? I cant figure it out.


 $(".fadelinks").hover(function(){
  $('.fadelinks > :gt(0)').hide();
 timer = setInterval(function(){$('.fadelinks > :first-child').fadeOut().next().fadeIn().end().appendTo('.fadelinks');}, 1500);
}, function() {
clearInterval(timer);

});

Jonathan Snook said on March 25, 2014

@Ashley: You'd want to use the Multiple Slideshows example as a base.

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

I haven't actually tried this code but I think it'll work. :)

Sorry, comments are closed for this post. If you have any further questions or comments, feel free to send them to me directly.