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

Question

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

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

Answer 1

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

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

Answer 2

问题是unslick持续触发调整大小，即使它已被取消，这反过来打破它。我的同事提出的解决办法就像这张支票。

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

更新：

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

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只能每500ms左右调用一次。

Answer 4

以下是我的观点：https://codepen.io/DriftwoodJP/pen/exxgxK

var init = {
  autoplay: true,
  infinite: true,
  cssEase: "linear",
  slidesToShow: 1,
  slidesToScroll: 1 };


$(function () {
  var win = $(window);
  var slider = $(".slider");

  win.on("load resize", function () {
    if (win.width() < 576) {
      slider.not(".slick-initialized").slick(init);
    } else if (slider.hasClass("slick-initialized")) {
      slider.slick("unslick");
    }
  });
});

Answer 5

我发现由于某种原因，当我有mobileFirst: true设置时，它的工作方式与我的预期相反。这对我有用（仅在手机上显示滑块）

mobileFirst: true 
responsive: [
            {
                breakpoint: 2000,
                settings: "unslick"
            },
            {
                breakpoint: 1600,
                settings: "unslick"
            },
            {
                breakpoint: 1024,
                settings: "unslick"
            },
            {
                breakpoint: 600,
                settings: "unslick"
            },
            {
                breakpoint: 480,
                settings: {
                    slidesToShow: 1,
                    slidesToScroll: 1
                }
            } ```

Answer 6

你可以使用这段代码

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

});