이전/다음 단추를 사라지게하기

Question

일부 내용에 대해 빠른 jQuery 슬라이더 상자를 입력했습니다. 지금은 3 개의 패널이나 페이지 만 가지고 있으며 "이전"또는 "다음"을 클릭 할 때 순환됩니다. 지금 당장 가지고있는 유일한 문제는 버튼이 끝날 때 버튼을 비활성화하는 것입니다. 현재는 계속 클릭 할 수 있으며 컨테이너는 왼쪽 또는 오른쪽으로 계속 이동합니다.

어떻게해야합니까? 첫 번째/마지막 슬라이드에 클래스를 추가하고 링크를 숨기는 데이 클래스가 있는지 알려주려고 생각했습니다. 그것은 가장 친근한 방법이 아닐 수도 있습니다. 나는 그것이 다른 자식 div가 있는지 확인하고 싶지 않은 경우 버튼을 사용하지 않도록 설정하려고합니다. 그렇게하면 나중에 원할 경우 더 많은 패널을 추가 할 수 있고 jQuery는 버튼을 비활성화 할시기를 알게됩니다. http://codepen.io/anon/full/xdilq이

이 어떤 도움을 크게 appreaciated 될 것이다 : 여기

내가 현재 가지고있는 것입니다!

Answer 1

애니메이션이 완료되거나 그에 따라 감소 할 때 변수를 1 씩 증가시키는 것은 어떻습니까? 그리고이 변수가 3 단계에있을 때 버튼을 숨기면 그렇지 않으면 보여줍니다. 클릭의 증가 또는 VAR c 감소에

var counter = 1; 
$('.next').click(function() { 
    $('.pageContainer').animate({ 
    "left": "-=422px" 
    }, 1000, function() { 
    counter++; 
    if(counter >= 3){ // or panels.length 
     // hide button "next" 
    } 
    }); 
}); 

Answer 2

jsBin demo

pagesN = $('.pages').length; 
var c = 0; 

function anim(){ 
    c = c===-1 ? pagesN-1 : c%pagesN; 
    $('.pageContainer').stop().animate({left: -422*c }); 
} 


$('.previous, .next').click(function(){ 
    var myClass = $(this).hasClass('next') ? ++c : --c; 
    anim(); 
}); 

같은 뭔가. 내부보다 는 모듈로 연산자 (다음) 감사 -1 (이전)로 이동하여 최대 범위에서 항상을 유지하기 위해 c을 방지하는 삼항 연산자 거기 애니메이션 : 이것은 위대한 작품을

c = c===-1 ? pagesN-1 : c%pagesN;