왜 내 슬라이더에서 애니메이션이 제대로 작동하지 않습니까?

Question

jQuery 간단한 슬라이더가 있는데, 슬라이드에 15 개의 그림이 5 개씩 있습니다. 이전 버튼과 다음 버튼이 있습니다.

각 다음 클릭은 슬라이더 애니메이션이있는 855px의 왼쪽 움직임을 생성합니다. 이전의 각 클릭은 슬라이더 애니메이션을 사용하여 오른쪽 이동을 855px까지 생성합니다.

이 내 jQuery 코드입니다 : 지금은이 문제가

$(document).ready(function(){ 
    $(".prev_button").click(function(){ 
     $("ul.slider").animate({ 
      left: "+=855" 
     }, 3000, function(){ 
      $("ul.slider").css('left', '0'); 
      li_no = 0; 
      $("ul.slider").find("li").each(function(){ 
       li_no = li_no + 1; 
      }); 
      slide_after_this = li_no - 6; 
      $('ul.slider li:gt('+slide_after_this+')').prependTo('ul.slider'); // << line changed 
     }); 
    }); 

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

:

우선 일 이전 버튼 (왼쪽 화살표) 함께 나는 그것을 애니메이션 쇼를 클릭하고 요소를 변경할 때 그것들은 서로 싸여 있지 않습니다. (나는 첫 번째 원소 앞에 immidiatly하게 마지막 요소를 표시하지 않습니다.) 나는이 이유를 찾을 수 없다.

두 번째 문제는 다음과 같다 오른쪽 및 왼쪽 화살표 모두 함께 : 그냥 권리를 클릭하면

가 작동 슬라이더를 화살표는 애니메이션과 요소를 변경할 수 있지만, 잘 난 (순서대로 I을 모두 버튼을 클릭하면 오른쪽 또는 왼쪽 또는 오른쪽) 요소가 변경되지만 애니메이션이 표시되지 않습니다. 루틴이 일부 경고에 의해 애니메이션 기능 내부로 들어가는 지 확인하고 내부로 들어가지만 화면에서 움직이지는 않습니다.

http://jsfiddle.net/mpx83tpv/18/

Answer 1

당신이다 정말 가까이 .slider_container

div.slider_container 
{ 
    height:380px; 
    width:855px; 
    margin-left:auto; 
    margin-right:auto; 
    overflow:hidden; 
} 

편집 JS에 대한 overflow:hidden을 시도해보십시오 :

는

또한 같은 코드 아래 사용

이

당신에게 도움이 될 수있는 링크입니다 슬라이더가 양쪽에있을 때 끝에 오른쪽과 왼쪽을 모두 사용하고 그 중 하나가 항상 0입니다.

$(document).ready(function(){ 
    $(".prev_button").click(function(){ 
     $("ul.slider").animate({ 
      left: "+=855" 
     }, 3000); 
    }); 

    $(".next_button").click(function(){ 
     //alert($("ul.slider").css("right")); 
     $("ul.slider").animate({ 
      left: "-=855" 
     }, 3000); 
    }); 
}); 

당신이 그들을 제거 할 필요가 당신이뿐만 아니라 왼쪽에 동일 할 $("ul.slider").css('right', '');에 $("ul.slider").css('right', '0'); 라인을 대체,이 경우에는 오른쪽과 왼쪽 사용해야 스크롤 무한을 원하는 경우.

다음 가시적 인 div를 추가하기 위해 애니메이션 전에 콜백을 수행 할 때 애니메이션 전에 로직을 구현하십시오.

까다로운 부분은 div 카운트를 계산 한 후이를위한 prev 버튼이 될 것입니다. 애니메이션없이 새 왼쪽 세트가 필요하고 왼쪽으로 움직이는 애니메이션을 호출해야합니다.

이러한 의미가 되길 바랍니다.