摧毀Cycle2的窗口大小調整

Question

我使用的是http://jquery.malsup.com/cycle2/api/，我試圖在檢測到移動設備時摧毀窗口大小調整事件的cycle2滑塊。不幸的是它返回以下兩個錯誤：

[cycle2] slideshow must be initialized before sending commands; "destroy" ignored 

[cycle2] slideshow must be initialized before sending commands; "reinit" ignored 

也許有人可以幫助，我做錯了什麼？這裏是代碼：

$(function() { 


    var slider = $('.slider').cycle(); 

    condition = true; 

     //destroy onload under condition 
    if(condition){ 
     slider.cycle('destroy');   
    } 

     //destroy on resize 
    $(window).on('resize',function() {    

     condition = true; //Will be function to recondition let´s say it's true by now 

     if(condition){ 

       slider.cycle('destroy'); 

     } else {    

       slider.cycle('reinit');    

     } 

    }); 

}); 

謝謝。

Answer 1

你看上去破壞這裏的滑塊：

if(condition){ 
    slider.cycle('destroy');   
} 

你可以那樣做：

$(function() { 

    var $W = $(window), 
     slider = $('.slider').cycle(); 

    $W.on('resize',function() {    

     if ($W.width() < 768) // width of device 
      slider.cycle('destroy'); 

    }); 

}); 

Answer 2

我知道這是一個老問題，但我試圖找出這並且在仔細閱讀文檔後，這就是我想出來的。

因此，我使用數據屬性來設置我的幻燈片上的選項。我非常喜歡這個功能。

爲了簡單起見，這裏是我的開場白循環2格

<div data-cycle-carousel-visible="3" 
    data-cycle-carousel-fluid="true" 
    data-cycle-fx="carousel" 
    data-cycle-prev="#carousel-prev" 
    data-cycle-next="#carousel-next" 
    class="cycle-slideshow cycle-front-page-slideshow" 
> 

注意，我並添加循環幻燈片類，以便循環2自動初始化，然後我還添加了另一個類週期頭版，幻燈片以防萬一我在我的網站上有其他幻燈片，我可以瞄準這一個。

我的JavaScript看起來像這樣。

function check_window_size(opts){ 
    // Check if the max-width of window is 899px; window.matchMedia is a native javascript function to check the window size. 
    var w899 = window.matchMedia("(max-width: 899px)");        

    // if it is max-width of 899px, then set the number of items in the cycle2 carousel slideshow to 2, else show 3 
    // to see if it matches, you would use the variable and grab the matches array; this will return true or false if window size is max-width 899px 
    if(w899['matches']) { 
     opts.carouselVisible = 2; 
    }else{ 
     opts.carouselVisible = 3; 
    } 
} 

在這裏，你會（使用.cycle - 頭版 - 幻燈片類礦井）

// Grab the cycle2 slideshow initialized from the data attributes on the DIV above 
$('.cycle-front-page-slideshow').on('cycle-bootstrap', function(e, opts, API) { 
    // run the check_window_size function to get initial window size, just in case they are max-width 899px already 
    check_window_size(opts); 

    // When window is resized, send the options to the check_window_size function so we can manipulate it 
    window.onresize = function() {   
     check_window_size(opts);   
    }; 

}); 

還要注意針對你的幻燈片，如果你要使用木馬功能，必須從http://jquery.malsup.com/cycle2/download/下載cycle2 carousel轉換插件

希望這可以幫助其他人。