只能在手机屏幕尺寸上使用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

回答

相关问题