Cycle2가 "주기 초기화 됨"을 트리거하지 않습니다.

Question

슬라이드가 끝나고 슬라이더가 작동하기 전에 기능을 실행하려고합니다. 다음과 같이 내 코드는 다음과 같습니다

$('#slider').cycle({ 
    swipe: true, 
    fx: 'scrollHorz', 
    slides: '> article', 
    timeout: 7500 
}); 

$('#slider').on('cycle-initialized cycle-after', function(e, optionHash, outgoingSlideEl, incomingSlideEl, forwardFlag) { 
    $(this).find('.loader').addClass('loaded'); 
    $(this).find('.display-selector').removeClass('out-of-place').addClass('in-place'); 
    $(this).find('.tablet-selector').removeClass('out-of-place').addClass('in-place'); 
    $(this).find('.mobile-selector').removeClass('out-of-place').addClass('in-place'); 
}); 

$('#slider').on('cycle-before', function(e, optionHash, outgoingSlideEl, incomingSlideEl, forwardFlag) { 
    $(this).find('.loader').removeClass('loaded'); 
    $(this).find('.display-selector').removeClass('in-place').addClass('out-of-place'); 
    $(this).find('.tablet-selector').removeClass('in-place').addClass('out-of-place'); 
    $(this).find('.mobile-selector').removeClass('in-place').addClass('out-of-place'); 
}); 

모든 cycle-initialized 제외하고 잘 작동합니다 - 그것은 실행되지 않습니다. 내가 무엇을 할 수 있을지?

Answer 1

주기를 작성하기 전에 이벤트 바인딩을 넣어야합니다. 그렇지 않으면주기가 초기화 된 후에야 함수가주기 초기화 이벤트에 바인드되지 않고 호출되지 않습니다.

그냥이로 변경하고 작동합니다 :

$('#slider').on('cycle-initialized cycle-after', function(e, optionHash, outgoingSlideEl, incomingSlideEl, forwardFlag) { 
    $(this).find('.loader').addClass('loaded'); 
    $(this).find('.display-selector').removeClass('out-of-place').addClass('in-place'); 
    $(this).find('.tablet-selector').removeClass('out-of-place').addClass('in-place'); 
    $(this).find('.mobile-selector').removeClass('out-of-place').addClass('in-place'); 
}); 

$('#slider').on('cycle-before', function(e, optionHash, outgoingSlideEl, incomingSlideEl, forwardFlag) { 
    $(this).find('.loader').removeClass('loaded'); 
    $(this).find('.display-selector').removeClass('in-place').addClass('out-of-place'); 
    $(this).find('.tablet-selector').removeClass('in-place').addClass('out-of-place'); 
    $(this).find('.mobile-selector').removeClass('in-place').addClass('out-of-place'); 
}); 

$('#slider').cycle({ 
    swipe: true, 
    fx: 'scrollHorz', 
    slides: '> article', 
    timeout: 7500 
});