jQuery cycle2 : 스크롤에서 슬라이드를 따라 이동

Question

클릭시 슬라이드 변경을 트리거하는 대신 현재 Cycle2 플러그인을 사용하여 슬라이드 쇼를 만듭니다 (http://jquery.malsup.com/cycle2/). 스크롤 할 때 트리거하려고합니다. 본질적으로 나는 복제물을 시도하고있다 : http://loris-cormoreche.com하지만 cycle2 플러그인.

나는 문제를 설명하기 위해 설정 한 코드 012을 가지고있다 : http://codepen.io/neal_fletcher/pen/NrRdmP 내가 겪고있는 문제를 보게되면, 이미지는 계속 깜박 거리며 한 번에 하나 이상의 이미지를 순환한다. 그냥 꽤 버그. 내가 현재 가지고있는 코드는 다음과 같이 제안이나이를 개선 할 수있는 방법

$('.cycle-slideshow').on('DOMMouseScroll mousewheel', function (event) { 
    if(event.originalEvent.detail > 0 || event.originalEvent.wheelDelta < 0) { //alternative options for wheelData: wheelDeltaX & wheelDeltaY 
     $('.cycle-slideshow').cycle('next'); 
     console.log('Down'); 
    } else { 
     $('.cycle-slideshow').cycle('prev'); 
     console.log('Up'); 
    } 
    //prevent page fom scrolling 
    return false; 
}); 

크게 감사하겠습니다!

Answer 1

버그가있는 이유는 모든 "스크롤 클릭"또는 원하는대로 이벤트가 트리거되기 때문입니다. 그래서 당신이 스크롤 할 때 당신은 그것을 번쩍 거리게 만드는 여러 번 트리거하고 있습니다.

var scrollDisabled = false; 
$('.cycle-slideshow').on('DOMMouseScroll mousewheel', function(event) { 

if (scrollDisabled) 
    return; 

    if (event.originalEvent.detail > 0 || event.originalEvent.wheelDelta < 0) { //alternative options for wheelData: wheelDeltaX & wheelDeltaY 
    $('.cycle-slideshow').cycle('next'); 
    console.log('Down'); 
    } else { 
    $('.cycle-slideshow').cycle('prev'); 
    console.log('Up'); 
    } 
    //prevent page fom scrolling 

    scrollDisabled = true; 
    setTimeout(function(){scrollDisabled = false;}, 1200); 

}); 

나는 기본적으로 1200 밀리 초 동안 마우스 휠 이벤트의 설정

는 사용 후 : http://codepen.io/LinusAronsson/pen/EygWpd

내가 한 것은 다음에 jQuery를 변경했다 :

나는이 codepen에 고정 이것은 다음 그림이보기에 오기 전에 트리거되지 않도록하기에 충분한 지연입니다.