jQuery 무한 회전식 슬라이드 : 첫 번째 반복에서 슬라이드 # 2가 슬라이드 # 3으로 바뀜

Question

무한 jQuery 회전식 캐 러셀을 만들고 있습니다. 무한대는 최종 슬라이드가 사용자에게 표시 된 직후 첫 번째 슬라이드를 표시한다는 것입니다. 이를 달성하기 위해 게시 완료 콜백 함수에서이 작은 조정을 수행합니다.

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

기본적으로 무한한 슬라이드 쇼가 발생합니다. 그러나, 특히 두 번째 슬라이드을 엉망으로 만듭니다. 슬라이드 1에서 슬라이드 2로 이동하는 첫 번째 반복에서 슬라이드 2는 슬라이드 3으로 바뀝니다 (실제로는 빠르게 발생합니다). 이후의 모든 반복 작업은 슬라이드 2를 슬라이드 2로 렌더링하고 슬라이드 3으로 렌더링하지 않아도됩니다.

이 예제를 더 자세히 이해하려면 필요한 HTML, CSS, jQuery를 모두 포착하는 다음 js 바이올린을 살펴보십시오.

jsfiddle for jQuery infinite carousel/slideshow

누구나 : 무슨 일이야 알아?

Answer 1

애니메이션 완료시 ul의 시작 부분에서 li을 제거하고 마지막에 넣으므로 left_indent을 1 요소의 배수로 재설정하므로 애니메이션이 발생하기 때문에 이러한 현상이 발생합니다.

간단한 수정 대신 $('#slides ul').css({'left': -item_width});

jsfiddle

Answer 2

훨씬 간단한 방법의 $('#slides ul').css({'left': 0});을하는 것입니다 :

jsBin demo

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}); 
}); 

}