jQuery Cycle2 通过调整窗口大小来更改幻灯片元素的数量答案

【问题标题】：jQuery Cycle2 Change number of slideshow elements by resizing windowjQuery Cycle2 通过调整窗口大小来更改幻灯片元素的数量
【发布时间】：2013-02-06 23:48:04
【问题描述】：

我正在为桌面和平板电脑视图构建响应式设计。在这个设计中，我使用一个或多个带有jQuery Cycle2 的幻灯片构建。此幻灯片包含桌面中的 3 个滑块中的对象，而平板电脑版本中仅包含 2 个。

我的方法：我正在检查窗口大小调整事件，解开所有循环标题，将新标题包装在给定数量的元素周围，然后重新启动循环插件。

我的问题：在我尝试重新启动循环插件之前一切正常。如果没有任何失败或其他东西，它就无法正常工作。所以问题似乎只是重新初始化。

我的代码：

//function to fire the resize event when its done
var delay = (function(){
    var timer = 0;
    return function(callback, ms){
    clearTimeout (timer);
    timer = setTimeout(callback, ms);
    };
})();

$(window).resize(function() {
    delay(function(){
        if( window.innerWidth <= 979 ){
            resizeWrapper( 2 );
        }
    }, 500);
});

//function for delete wrappers and wrap new ones based on a given number
function resizeWrapper( numberOfItems ){
    $( '.productsItem' ).unwrap();

    var $set_latestProductsCycle = $( '#latestProductsCycle' ).children();
    for( var i=0, len = $set_latestProductsCycle.length; i < len; i+=numberOfItems ){
        $set_latestProductsCycle.slice( i, i+numberOfItems ).wrapAll( '<div class="popularProductsWrapper"/>' );
    }
    $( '#latestProductsCycle' ).cycle({
        fx: 'scrollHorz',
        prev: '#latestProductsButtonLeft',
        next: '#latestProductsButtonRight',
        timeout: 0,
        caption: '.popularProductsWrapper'
    });
}

感谢您的帮助。

【问题讨论】：

标签： jquery resize jquery-cycle responsive-slides

【解决方案1】：

自己回答问题：

当您第一次调用循环脚本时，我忘记删除将创建的哨兵容器。此外，当我重新启动循环容器时，不需要定义“标题”。

简而言之，函数应该如下所示：

    function resizeWrapper( cycleContainer, numberOfItems ){
    $( cycleContainer ).cycle( 'destroy' );
    $( cycleContainer + ' .cycle-sentinel' ).remove();

    $( cycleContainer + ' .slider .item' ).unwrap();

    var $set_latestProductsCycle = $( cycleContainer ).children();

    for( var i=0, len = $set_latestProductsCycle.length; i < len; i+=numberOfItems ){
        $set_latestProductsCycle.slice( i, i+numberOfItems ).wrapAll( '<div class="slider"/>' );
    }

    $( cycleContainer ).cycle({
        fx: 'scrollHorz',
        prev: cycleContainer + 'Prev',
        next: cycleContainer + 'Next',
        timeout: 0
    });
}

感谢大家的关注。

【讨论】：