How to move a carousel item to the middle when it's clicked in jquery

Question

How can I make the carousel center the item I\'ve clicked to the middle? I\'ve looked everywhere for an answer but they\'re not straight answers... Can someone help me in th

Answer 1

While you have prepared all the information needed about all items, you can calculate the value of the left based on the clicked item.

Here is my modification:

and I've bound the click action of carousel items with this function and passed the clicked item using the self keyword.

var itemClicked=function(item){
    var itemIndex=$(item).index(),
        newLeft=(itemIndex*itemWidth*-1)+Math.floor(($(viewport).width()/itemWidth)/2)*itemWidth;
    $(itemList).animate({left:newLeft+"px"},400);
};

You can check it working on this url: http://jsfiddle.net/rUZHg/3/

I assume that this should work despite of the number of viewed elements while it calculates the padding between the left 0 and the left of the center element.