무한 슬라이더 이전 버튼 논리가 작동하지 않습니다.

jQuery를 사용하여 무한 슬라이더를 만들려고합니다. 활성 슬라이드는 화면의 2/3이고 다음 슬라이드는 1/3이됩니다. 따라서 다음 슬라이드의 미리보기를 이미 보았습니다.무한 슬라이더 이전 버튼 논리가 작동하지 않습니다.

빌드 한 슬라이더가 작동 중입니다. next을 클릭하면 슬라이더가 왼쪽으로 움직입니다. 초기화에

트릭

나는 마지막 슬라이드 후 처음 두 개의 슬라이드를 복제. slideIndex, 즉 현재 색인을 계속 확인하면 슬라이드 수에서 1을 뺀 것이므로 슬라이더가 0으로 재설정됩니다. 무한대의 슬라이더가 있습니다. 나는 또한 당신이 첫 번째 슬라이드에있어 이전에 클릭 할 때 효과를 적용 할 때

문제

문제는 온다. 기본적으로 동일하게 수행해야하지만 슬라이더를 0으로 재설정하지 말고 슬라이드의 끝으로 다시 설정하십시오.

var slider = $('.slider'); 
var slides = slider.find('.slides').children(); 
var slidesW = slides.width(); 

root.offset = -Math.abs((root.slideIndex * slides.eq(index).width())); 
console.log(root.offset); 

// Update active class 
slides.removeClass('active'); 
// slides.eq(index).addClass('active'); 

// Add class active 
TweenMax.to(slides.eq(index), 1, { 
    className: 'active', 
    onComplete: function() { 

     if (root.slideIndex >= (root.numOfSlides - 2)) { 

      slider.find('.slides').addClass('no-transition'); 

      slides.removeClass('active'); 
      slides.filter(':first').addClass('active'); 

      root.offset = 0; 

      TweenMax.set(slider.find('.slides'), { 
       x: root.offset, 
       onComplete: function() { 
        root.slideIndex = 0; 
        $('#footer .paging #indicator').find('span').html('01'); 

        return false; 
       } 
      }); 

     } 
    } 
}); 

// Remove no-transition class 
slider.find('.slides').removeClass('no-transition'); 

// Change position of ul.slides 
TweenMax.to(slider.find('.slides'), 0.4, { 
    x: root.offset 
});

나는 if (root.slideIndex === (root.numOfSlides - 2)) {의 if 문 slideIndex가 root.numOfSlides - 2 같은 경우는 항상 제로로 리셋됩니다 가지고 있기 때문에. 따라서 이전 또는 다음을 클릭하면 아무런 문제가되지 않습니다. slideIndex이 슬라이드 4의 예제에 있으면 0으로 재설정됩니다.

은 내가 codepen에서 슬라이더를 다시 : https://codepen.io/anon/pen/zEmozr

희망 누군가가 검색 및 지금 어떤 일 시도한 후,이 문제를 해결하는 방법을 모르는 나를 도울 수 있습니다. 뭔가 명확하지 않거나 무엇이든지 알려주는 경우 알려 주시기 바랍니다. 미리 감사드립니다.

출처

2017-10-15 Caspert

변경이 라인 :

if (dir == "ss-prev") { 
    // root.slideIndex--; 
    root.slideIndex = (root.slideIndex - 1 < 0) ? root.numOfSlides - 1 : root.slideIndex - 1; 
    console.log('prev', root.slideIndex); 
}

기준 :

if (dir == "ss-prev") { 
    // root.slideIndex--; 
    root.slideIndex = (root.slideIndex - 1 < 0) ? root.numOfSlides - 3 : root.slideIndex - 1; 
    console.log('prev', root.slideIndex); 
}

https://codepen.io/anon/pen/xXBMZJ?editors=1111

출처

2017-10-20 22:31:05

무한 슬라이더 이전 버튼 논리가 작동하지 않습니다.

답변

관련 문제