只能在手機屏幕尺寸上使用slick.js

我只想讓slick.js插件在手機屏幕尺寸上處於活動狀態，比如說在450像素以下。我希望這發生在頁面加載或瀏覽器調整大小。如果我加載頁面或調整大小到正確的寬度，Slick.js可以正常工作，但如果我將瀏覽器的大小調整爲大於450px，則不能正常工作。這可以做到嗎？只能在手機屏幕尺寸上使用slick.js

$(document).ready(function(){ 
    $(window).resize(function(){ 
     if($(window).width() < 450) { 
     $('.round-card-slick').slick({ 
     }); 
     } else { 
     $('.round-card-slick').unslick(); 
     } 
    }); 
    });

來源

2014-09-23 user1406737

您的代碼光滑只運行在450下。發生的事情超過450個。你說它不能正常工作。這是否意味着它還在工作？它應該被禁用。 – Leeish 2014-09-23 20:52:07

問題是不點擊不斷觸發調整大小，即使它沒有被點擊，反過來，它打破了它。一個解決，我的同事想出了是這樣的檢查..

var target = $('.slick-mobile-gallery'); 
if(target.hasClass('slick-initialized')) 
    target.unslick();

更新：

該解決方案內置功能在slick插件& @詹姆斯·戴利的答案是真正答案這個問題。

來源

2014-10-06 19:47:54 user1406737

@詹姆斯達利的答案是這樣做的真實方法 – 2016-07-26 07:45:22

您的問題是該函數不能在頁面加載上運行，因爲它只設置爲在調整窗口大小時調用。

$(document).ready(function() { 
    var $window = $(window) 
    , $card = $('.round-card-slick') 
    , toggleSlick; 

    toggleSlick = function() { 
    if ($window.width() < 450) { 
     $card.slick(); 
    } else { 
     $card.unslick(); 
    } 
    } 

    $window.resize(toggleSlick); 
    toggleSlick(); 
});

藉此更進一步那將是一個非常好的主意，節流window.resize回調使toggleSlick只調用每500ms左右。

來源

2014-09-23 21:05:48 animatedgif

你是對的，我沒有在加載時進行初始化。問題在於，當它不應該時，unslick正在發射。看到我的答案。謝謝你的幫助。 – user1406737 2014-10-06 19:45:32

順便說一句，現在你可以直接在光滑的響應設置爲此對象

responsive: [ 
    { 
     breakpoint: 480, 
     settings: "unslick" 
    } 
]

來源

2016-02-02 20:54:47

這不是做他們想要的相反嗎？他們只希望Slick在移動設備上運行，而不是在桌面上運行。上面的代碼觸發Slick時，窗口是480px和下。 – cbloss793 2017-07-26 16:38:09

將斷點極端寬度設置爲5000時可以工作，但當設置爲默認值並且響應斷點480使用slickjs設置時，它不起作用。請參閱：https://jsfiddle.net/jbvknsz4/ – Marc 2017-12-16 12:58:18

https://github.com/kenwheeler/slick/issues/542#issuecomment-132752112 – Marc 2017-12-16 13:01:02

只能在手機屏幕尺寸上使用slick.js

回答

相關問題