CODEWITHSUNDEEP
jquery
Scott
Scott

Reputation: 917

Scrolling a div of images

I'm looking for a simple way to scroll a list of images horizontally across a div, and have the pattern repeat (an infinite loop of images moving slowly from left to right).

Currently using http://logicbox.net/jquery/simplyscroll/ for this task, but it has a lot of features I don't need (such as user controls and vertical scrolling). My hope is that there's a simple way to code this in jQuery in a few dozen lines.

I'm confident I can build something to scroll the images horizontally, but getting them to loop is beyond me.

Any help, information, or even a new script (that has been updated recently) would be awesome. Thanks!

Upvotes: 0

Views: 3405

Answers (2)

Joseph Marikle
Joseph Marikle

Reputation: 78590

Super super simple example of how to use animate() and its callback to create a loop. It animates only the first item and then moves the node to after the last child. Thus you can keep animating the first element every time.

Code: http://jsfiddle.net/54fUH/
Demo: http://jsfiddle.net/54fUH/show

(function animate() {
    $("#slides li:first").each(function(){
        $(this).animate({marginLeft:-$(this).outerWidth(true)},3000,function(){
            $(this).insertAfter("#slides li:last");
            $(this).css({marginLeft:0});
            setTimeout(function(){animate()},2000);
        });
    });
})();

Upvotes: 4

marissajmc
marissajmc

Reputation: 2613

Try the jquery jCarousel Lite plugin. See the auto scroll demo: http://www.gmarwaha.com/jquery/jcarousellite/?#demo

Upvotes: 0

Related Questions