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

感謝各位的關注。