Question

I have a working jQuery script that will cycle through some images. However, when it loops back to the first slide on the first loop, the first slide doesn’t show. But as it keeps running and looping back to the first it works just fine, it is just on the first loop.

Link to the problem: http://jsfiddle.net/YLJNw/8/

Answer 1

An easy fix is to simply remove your <div class="slide">. When you make your append call the images end up outside of this div whereas they begin inside of it.

jsFiddle example

An alternate option is to modify your jQuery to work on the div with class slide instead of the content div.

jsFiddle example

$(function() {
    $('.slide img:gt(0)').hide();
    setInterval(function() {
        $('.slide img:first').fadeOut(1000)
        .next('img').fadeIn(1000)
        .end().appendTo('.slide');
    }, 3000);
});