jQuery бесконечная карусель: слайд № 2 заменен слайдом № 3 на первой итерации

Question

Я строю бесконечную карусель jQuery. Бесконечно то, что он показывает первый слайд сразу после того, как последний слайд показан пользователю. Чтобы добиться этого, я сделаю небольшой твик в функции обратного вызова после завершения

$('#slide li:last').after('#slide li:first'),

Это в основном то, что делает бесконечное слайд-шоу. Тем не менее, это портит второй слайд в частности. На самой первой итерации перехода от слайда 1 к слайду 2 слайд 2 заменяется слайдом 3 (и это происходит очень быстро) . Каждая последующая итерация прекрасно работает, когда слайд 2 отображается как слайд 2, а не как слайд 3.

Чтобы лучше понять этот пример, взгляните на следующую скрипту js, которая захватывает все необходимые HTML, CSS, jQuery.

jsfiddle для бесконечной карусели / слайд-шоу jQuery

Кто-нибудь знает, что случилось:)?

Answer 1

Это происходит потому, что после завершения анимации вы удаляете li с начала ul и положить его в конце, таким образом, сбрасывая left_indent кратным 1 элементу.

Простое решение сделать $('#slides ul').css({'left': 0}); вместо $('#slides ul').css({'left': -item_width});

jsfiddle

Answer 2

Гораздо проще:

демоверсия jsBin

function slideshow(){

 var item_width = $('#slides li').outerWidth(true);

 $('#slides ul').stop().animate({left:-item_width},1200, function(){
     $('#slides li:last').after( $('#slides li:first') );
     $('#slides ul').css({left:0});
 });

}