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回调，以便{500}每隔500ms调用toggleSlick。

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

由于某种原因，我发现设置l时，它的工作与我所期望的相反。这是对我有用的方法（仅在移动设备上显示滑块）

mobileFirst: true

Answer 6

您可以使用此代码

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

}）;

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

6 个答案: