仅在移动屏幕尺寸上使用 slick.js

Question

我只希望 slick.js 插件在移动屏幕尺寸上处于活动状态，例如在 450px 以下。我希望这发生在页面加载或浏览器调整大小时。如果我加载页面或调整到正确的宽度，Slick.js 确实可以正常工作，但如果我将浏览器的大小调整为大于 450 像素，则 Slick.js 不会正常工作。这可以做到吗？

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

原文由 user1406737 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

问题是 unslick 即使在 unslicked 之后也会在调整大小时继续触发，这反过来又会破坏它。我的同事想出的解决办法就像这张支票一样……

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

更新：

该解决方案是 slick 插件中的内置功能，@James Daly 的回答是这个问题的真正答案。

原文由 user1406737 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

顺便说一句，现在您可以直接在灵活的响应设置对象中执行此操作

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

原文由 James Daly 发布，翻译遵循 CC BY-SA 4.0 许可协议