CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Basel Shbeb
Basel Shbeb

Reputation: 11

how to make my slider continue its loop?

I have a slider build up from a list ul contains 15 li.

I show each 5 elements as a group. In the and if you click next or previous buttons it will move slowly to the next five elements but after the third click (when you click previous for the forth time) it is not showing any elements. I know that is normal because I use right: "+=855" to move the elements so after three movements the 15 elements will ends .

I want this loop to continue (on the forth click I want to show the elements from the elements 1-5).

This link will show what I mean : http://jsfiddle.net/mpx83tpv/1/

Is there any addition to the animate function that I could add to achieve this?

Upvotes: 0

Views: 257

Answers (2)

Slippery Pete
Slippery Pete

Reputation: 3110

Just shuffle the <li>s to the end after the scrolling:

$(".prev_button").click(function () {
    $("ul.slider").animate({
        right: "+=855"
    }, 5000, function () {
        $("ul.slider").append($("ul.slider li:lt(5)"))
            .css("right", "-=855");
    });
});

http://jsfiddle.net/mpx83tpv/9/

Upvotes: 0

Y.Puzyrenko
Y.Puzyrenko

Reputation: 2196

No there is no addition to animate that could do such thing, but you always can use .prepend() or .append() like:

$("ul.slider").animate({
    right: "+=855"
}, 1000, function(){
    $("ul.slider").css('right', '0');
    $('ul.slider li:not(:nth-child(n+6))').appendTo('ul.slider');
});

Fiddle

Upvotes: 1

Related Questions