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