Simple slideshow

There are any number of JavaScript/jQuery slideshow plugins out there, probably the most popular of which is jQuery Cycle (which I’ve used repeatedly).

However, sometimes you just want something so simple that even a few KB worth of plugin is more trouble than it’s worth. With that in mind, I’ve written my “world’s easiest slideshow” script — just ten lines of jQuery and ten lines of CSS. I’ve used this three times in the last month alone, and it’s about as simple as I can imagine.

First, of course, we include the jQuery library:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

This is what the HTML will look like — just a <div> wrapper around a bunch of identically-sized images:

<div class="slideshow">
    <img src="first-image.jpg" width="500" height="100" alt="first image">
    <img src="second-image.jpg" width="500" height="100" alt="second image">
    <img src="third-image.jpg" width="500" height="100" alt="third image">
    <img src="fourth-image.jpg" width="500" height="100" alt="fourth image">
</div>

The CSS is as minimal as can be — just a handful of styles for the <div> wrapper and the images inside of it:

<style>
.slideshow {
    position: relative; /* necessary to absolutely position the images inside */
    width: 500px; /* same as the images inside */
    height: 100px;
}
.slideshow img {
    position: absolute;
    display: none;
}
.slideshow img:first-child {
    display: block; /* overrides the previous style */
}
</style>

Now, our custom jQuery code, beginning with $(document).ready (purists can remove that wrapper and put this JavaScript block at the bottom of their page instead):

<script>
$(document).ready(function() {
    setInterval(function() {
        var $curr = $('.slideshow img:visible'), // should be the first image
            $next = ($curr.next().length) ? $curr.next() : $('.slideshow img').first();
            // if there isn't a next image, loop back to the first image
        $next.css('z-index',2).fadeIn('slow', function() { // move it to the top
            $curr.hide().css('z-index',0); // move this to the bottom
            $next.css('z-index',1);        // now move it to the middle
        });
    }, 6000); // milliseconds
});
</script>

http://jsfiddle.net/mblase75/CRUJJ/

3 thoughts on “Simple slideshow

  1. Hi, very nice slideshow. The code is minimal. Thank you. By the way i was wondering if you can help me to include one feature in this code.. I wanted to put previous and next button. Is it possible..?

Leave a Reply

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

*