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

Question

我正在为桌面和平板电脑视图构建响应式设计。在这个设计中，我使用了一个或多个幻灯片制作与jQuery Cycle2。这个幻灯片在桌面containts在滑块和平板电脑版本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' 
    }); 
} 

感谢您的帮助。

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

感谢各位的关注。