Start over from first image when slide has reached end

Question

When my slide through images reaches the end, it stops. I have tried to make it start over, but can't make it happend. I hope someone can help me archieve this, taking base in my code. I followed som tutorials on how to create an image slider with JQuery, so I don't want to go away from the code that I have written (If that's possible). The solutions I've found so far are written with total different ideas. Here is the html code:

<body style="background-color: lightblue">
<div>
    <div id="slider" style="margin-left: auto; margin-right: auto; width: 800px; height: 800px; margin-top: 100px;">
        <img src="./images/Dogs.jpg" style="position: absolute;" class="active" />
        <img src="./images/pic.jpg" style="position: absolute;" />          
        <img src="./images/Mal.jpg" style="position: absolute;" />

    </div>
</div>

And here is the JS code:

function startSlide() {
    var $current = $('div #slider img.active');
    var $next = $current.next();        

    if($current.length == 0) {
        $next = $('#slider  div:first-child');
        //This is what where the code will go I guess
    }

//  $next.addClass('active');   
    $current.removeClass('active').css({
        "opacity" : 0.0,
        "zIndex" : 2
        });
        $("#slider img").animate({opacity: 1.0}, 2000, function() {
            $next.addClass('active').css({zIndex: 1});
        });
}

So my question is how to write the code so that the slide will start over once it reaches the last image. And preferably keeping the JQuery syntax Thanks in advance

Answer 1

Try this fiddle out and see if it helps: http://jsfiddle.net/eNuwv/2/

I modified the assignment for $next when the length of $current is zero to look like this:

$next = $('#slider :first-child');

and I changed the animate block at the end to use the reference to $next instead of the selector you had.

$next.animate({opacity: 1.0}, 2000, function() {
    $next.addClass('active').css({zIndex: 1});
});

Hope that helps.

ps. I'm not sure how you intend for the entire thing to initialize so the fiddle starts with all 3 images visible -- clicking the Start Slide link a few times will get you to a state where you should be able to cycle through.

I didn't have your CSS for class .active but maybe you are using it simply as a marker.

Answer 2

This is the complete code that works for me, you would have to play with the timings a little bit probably:

I used David's tip.

$(document).ready(function(){
    setInterval(function(){startSlide()}, 2100);
});

function startSlide() {
    var $current = $('div #slider img.active');
    var $next = $current.next();        

    if($next.length == 0) {
        $next = $('#slider :first-child');
    //make sure you don't make an empty circle
}
$current.removeClass('active');
$current.css({
    "opacity" : "0.0",
    "zIndex" : "2"
});
$next.animate({opacity: 1.0}, 2000, function() {
    $next.addClass('active').css({zIndex: 1});
});

}

I also added opacity:0 to the images that you don't want to display in the beginning.

Start over from first image when slide has reached end

Question

2 answers

solution1
1 2013-08-07 18:52:10

solution2
1 2013-08-07 19:18:22

Start over from first image when slide has reached end

Question

2 answers

solution1 1 2013-08-07 18:52:10

solution2 1 2013-08-07 19:18:22

solution1
1 2013-08-07 18:52:10

solution2
1 2013-08-07 19:18:22