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 
});