jQuery Tip: Another Simple Image Slideshow

Posted in jQuery Tips
Tags: ,

Here is another image slideshow that is slightly different from the last one I reviewed  as it has the images  surrounded by a DIV so you can add text to each if you wish.

We just wrap each image with a DIV with the appropriate styling:


The first line of code hides all the image but the first one.

Then wrapping our code in a setInterval of 3 seconds, we use div:first-child to get to the first element to fades out after a seond.

Then going to the next image to fade it into view in a another second. It will reset the image element to its previous state by using the end() jQuery method.

Lastly, the first image is thrown to the end of the stack with the appendTo() jQuery method.

With that technique, I do not need to check to see whether the image is the last one or not, as in the first image slideshow.

Demo: http://slideshow-another.javascriptworkshop.com/ 

Leave a Reply

Your email address will not be published. Required fields are marked *

*