jQuery 수직 목록 슬라이더는 두 번 이상 반복 할 수 없습니다

Question

나는 한 번 이상 스크롤 해야하는 경우를 제외하고는 잘 작동하는 수직 슬라이더가 있습니다.

슬라이더보기

코드

$(document).ready(function() {
    var speed = 1050;
    var elementHeight = 106;
    var countElements = $('#portfolio-navigation ul li');
    var numberElements = countElements.length;
    var totalHeight = numberElements * elementHeight;
    var containerHeight = 742;

    var currentPlace = elementHeight * 7;
    var currentDifference = 0;
    $("#up").addClass("nogo"); 
    $("#down").click(function(event) {
        $("#down").addClass("nogo");
        $("#up").removeClass("nogo");
        event.preventDefault();
        if (currentPlace >= totalHeight) { 
        } else { // Ellers, continue!
        currentPlace += elementHeight;
        currentDifference += elementHeight; 
            $("#portfolio-navigation ul").animate({ top: "-510px"}, speed );
        }   
    });
    $("#up").click(function(event) {
         $("#down").removeClass("nogo");
         $("#up").addClass("nogo");
        event.preventDefault();

        if (currentPlace <= containerHeight) { 
        } else { // Ellers, continue!
        currentPlace -= elementHeight;
        currentDifference -= elementHeight; 
            $("#portfolio-navigation ul").animate({ top: 0 + "px"}, speed );
        }   
    });
});

.

슬라이더를 두 번 이상 아래로 스크롤 할 수 있기를 원합니다.

아이디어가 있습니까?

환호 Nik

Answer 1

나는 당신의 질문을 이해하는 것이 확실하지 않지만, 일반적으로 목록의 끝까지 도착할 때까지 UL을 위아래로 이동시키고 싶습니다.고정 높이 컨테이너가있을 때 수행 할만 큼 쉽습니다.다음 버튼에서 -510px로 설정하는 대신 다음 버튼의 애니메이션에서 510px를 뺍니다.그런 다음 TotalHeight 및 ContainerHeight 변수를 사용하여 클래스를 추가 및 제거하는 대신 버튼을 비활성화 할시기를 비활성화 할 때 알아 내십시오.