仅在移动屏幕大小上使用slick.js

Question

我只希望slick.js插件在移动屏幕上是活动的，比如说在450 on以下。我希望这种情况发生在页面加载或浏览器大小调整上。如果我加载页面或将页面大小调整到正确的宽度，Slick.js就会正常工作，但如果我将浏览器的大小调整为大于450 to，则不会正常工作。这能办到吗？

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

Answer 1

问题是，即使在打开后，unslick仍会继续对尺寸进行调整，而这反过来又会破坏它。我同事提出的一项工作就像这张支票.

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

更新

解决方案是slick插件的内置特性& @James的答案是这个问题的真正答案。

Answer 2

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

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

Answer 3

您的问题是该函数没有在页面加载时运行，因为它只是在窗口调整大小时调用的设置。

$(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就可以每500 is左右调用一次。