A Simple jQuery Slideshow - FAQs

Created by Jon Raasch

Download A Simple jQuery Slideshow

Functionality Questions

How do I stop the playback from looping?
How can I randomize the order of the slides?
How do I make each image into a link (or put each image in a div)?
This script is written like crap, do you have a faster version?

Display Questions

My images are showing overlapped instead of one at a time.
Black boxes are showing when the images fade in older versions of IE

Errors and Bugs

It isn't working in IE (or another browser)! Help!
The slideshow isn't working at all. It just stays on the first frame

Miscellaneous Questions

Can I use this for free in my commercial project?

How do I stop the playback from looping?

If you'd like the slideshow to stop playing after it goes through the slides one time, you can stop the looping by removing it from the script. The looping occurs here:

var $next =  $active.next().length ? $active.next()
    : $('#slideshow IMG:first');

This loops back to the first slide if there is no next slide.

There are a couple ways you can stop the looping. First you can simply return out of the function if there is no next slide, by changing the above to:

if ( ! $active.next().length ) return;
var $next = $active.next();

However the function will still occur in the background everytime the interval fires, so it is better to define a variable for the interval and clear it. First, define a variable for the interval at the end of the script:

var mySlideshow = setInterval( "slideSwitch()", 5000 );

And then clear it if there is no next slide:

if ( ! $active.next().length ) {
    clearInterval( mySlideshow );
    return;
}

var $next = $active.next();

Putting this all together:

function slideSwitch() {
    var $active = $('#slideshow IMG.active');

    if ( $active.length == 0 ) $active = $('#slideshow IMG:last');
    
    if ( ! $active.next().length ) {
        clearInterval( mySlideshow );
        return;
    }
    
    var $next = $active.next();

    $active.addClass('last-active');

    $next.css({opacity: 0.0})
        .addClass('active')
        .animate({opacity: 1.0}, 1000, function() {
            $active.removeClass('active last-active');
        });
}

$(function() {
    var mySlideshow = setInterval( "slideSwitch()", 5000 );
});

How can I randomize the order of the slides?

To randomize the order of the slides, simply alter the $next definition:

var $sibs  = $active.siblings();
var rndNum = Math.floor(Math.random() \* $sibs.length );
var $next  = $( $sibs[ rndNum ] );

This finds the siblings of the active slide, and selects one at random.

How do I make each image into a link (or put each image in a div)?

First wrap each image in a <a> tag:

<div id="slideshow">
    <a href="my-link.html" class="active"><img src="img/img1.jpg" alt="" /><a>
    <a href="my-link.html"><img src="img/img2.jpg" alt="" /><a>
    <a href="my-link.html"><img src="img/img3.jpg" alt="" /><a>
</div>

Notice that the active class was also moved to the <a> tag.

Next replace every IMG with A in the CSS:

#slideshow A {
    position:absolute;
    top:0;
    left:0;
    z-index:8;
    opacity:0.0;
}

#slideshow A.active {
    z-index:10;
    opacity:1.0;
}

Finally replace every IMG with A in the JavaScript as well:

function slideSwitch() {
    var $active = $('#slideshow A.active');

    if ( $active.length == 0 ) $active = $('#slideshow A:last');

    var $next =  $active.next().length ? $active.next()
        : $('#slideshow A:first');

    $active.addClass('last-active');

    $next.css({opacity: 0.0})
        .addClass('active')
        .animate({opacity: 1.0}, 1000, function() {
            $active.removeClass('active last-active');
        });
}

$(function() {
    setInterval( "slideSwitch()", 5000 );
});

Of course if you are doing this with a div instead of a link, replace everything above with divs.

This script is written like crap, do you have a faster version?

Get off my case! I wrote this back in 2008 when I was first learning jQuery. Here's a more optimized version (although it's longer and less simple):

$(function() {
    var $slideshow = $('#slideshow'),
    $slides = [],
    active = null;
    
    // build the slides array from the children of the slideshow.  this will pull in any children, so adjust the scope if needed
    $slideshow.children().each(function(i) {
        var $thisSlide = $(this);
        
        // if its the active slide then set it to this index
        if ( $thisSlide.hasClass('active') ) active = i;
        
        $slides.push( $thisSlide );
    });
    
    // if no active slide, take the last one
    if ( active === null ) active = $slides.length - 1;
    
    function slideSwitch() {
        // add the last-active class to the previously active slide
        var $lastActive = $slides[active];
        $lastActive.addClass('last-active');
        
        // find the next slide
        active++;
        
        // set to zero if it's too high
        if ( active >= $slides.length ) active = 0;
        
        var $nextActive = $slides[active];
    
        $nextActive.css({opacity: 0.0})
            .addClass('active')
            .animate({opacity: 1.0}, 1000, function() {
                $lastActive.removeClass('active last-active');
            });
    }

    // start the interval
    setInterval( slideSwitch, 5000 );
});

My images are showing overlapped instead of one at a time.

This is caused by one of two issues:

1. You are using images of different sizes. It is best to use all the same size images with the slideshow. If this is not possible, see the solution to #2 below.

2. Your images have transparency (e.g. transparent PNGs or GIFs). To get around this, you will have to wrap the images in divs and rotate between these. With each div, make sure to set a background color that matches the background of your site. (This solution also works for different sized images)

For instructions on how to wrap everything in a div, read here.

Black boxes are showing when the images fade in older versions of IE

This problem has to do with the way older versions of IE handle alpha transparency. It only occurs in versions 6 and 7 but I unfortunately do not know of any way around it. If anyone has a solution please contact me.

It isn't working in IE (or another browser)! Help!

Open up the demo in whichever browser is giving you trouble. (Demo here)

You'll most likely notice that it is working fine, meaning that the problem exists either somewhere else in your site, or with something you altered in the script. Unfortunately, I cannot help you track down and fix any problems you have introduced yourself. I suggest spending some time tracking down whatever problem you are having, and if you still can't solve it, asking a question on Stack Overflow. You can also consider hiring me for support.

The slideshow isn't working at all. It just stays on the first frame

This could be caused by a number of issues, but most likely another script on your page is causing a JavaScript error, which is preventing the slideshow script from even starting. Use a JavaScript console tool, such as the one included in the Chrome / Safari developer tools, or in Firefox's Firebug. Do you see another error being triggered on the page?

Otherwise, make sure you have included all the JavaScript files you need, including both jQuery and the slideshow script. Finally make sure JavaScript is turned on.

If you are still experiencing problems, I unfortunately cannot provide any assistance. I receive a lot of free support requests each week, and simply do not have the bandwidth to handle them. Consider asking about your problem on Stack Overflow, or hiring me for support.

Can I use this for free in my commercial project?

Yes, the Simple jQuery Slideshow Script is completely free and open-source, however if you like the script please consider making a donation. It is not necessary to donate, but if the script saved you time or helped you out, please consider donating whatever you think that is worth. Your donations make free scripts like this possible. Click here to donate.

The script is released under the FreeBSD license:

Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:

Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.

THIS SOFTWARE IS PROVIDED BY JON RAASCH 'AS IS' AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL JON RAASCH OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

The views and conclusions contained in the software and documentation are those of the authors and should not be interpreted as representing official policies, either expressed or implied, of Jon Raasch, who is the man.

Make A Donation