CODEWITHSUNDEEP
javascriptjqueryhtmlcsshtml-lists
Nishant Nawarkhede
Nishant Nawarkhede

Reputation: 8400

Animate ui ul to left and right - not circular

Want to display 3 items from ul at a time. And when user clicks to the next arrow each element is traversed and when control reaches to last item i.e 3rd item , next three items should be shown in place of first three items.

The list should not be circular, means after last item in the list there must not be first item.

Have created fiddle but it traversing in circular fashion. I am traversing list using this,

$("#rightArrow").click(function (e) {
    var curr = $("#itemsListBox ul li:last");
    curr.parent().prepend(curr);
});
$("#leftArrow").click(function (e) {
    var curr = $("#itemsListBox ul li:first");
    curr.parent().append(curr);
});

http://jsfiddle.net/N6XrL/

Upvotes: 1

Views: 142

Answers (2)

Khamidulla
Khamidulla

Reputation: 2975

You should keep track of you current picture. like in following code.

var items_count = $("#itemsListBox ul li").length, current_item_counter=0;

$("#rightArrow").click(function(e) {
    if(current_item_counter<items_count)
    {
        var curr =  $("#itemsListBox ul li:last");
        curr.parent().prepend(curr);
        current_item_counter++;
    }
});
$("#leftArrow").click(function(e) {
    if(current_item_counter> 0)
    {
        var curr =  $("#itemsListBox ul li:first");
        curr.parent().append(curr);
        current_item_counter--;
    }
});

here is jsFiddle.

Upvotes: 1

James Montagne
James Montagne

Reputation: 78710

You could simply hide and show the appropriate element instead of appending/prepending:

http://jsfiddle.net/N6XrL/2/

var $elements = $("#itemsListBox ul li");
var count = $elements.length;
var showNum = 3;
var counter = 0;

$("#rightArrow").click(function (e) {
    if (counter + showNum < count) {
        counter++;
    }
    display();
});

$("#leftArrow").click(function (e) {
    if (counter > 0) {
        counter--;
    }
    display();
});

function display() {
    $elements.hide();    
    $elements.slice(counter, counter + showNum).show();
}

display();

Upvotes: 1

Related Questions