Javascript 仅在手机屏幕尺寸上使用slick.js

我只希望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();
      }
    });
  }); 

$（文档）.ready（函数（）{
$（窗口）。调整大小（函数（）{
如果（$（窗口）.width（）<450）{
$（'.round card slick'）。slick({
});
}否则{
$（'.round card slick'）.unslick（）；
}
});
}); 

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

$(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();
});

$（文档）.ready（函数（）{
变量$window=$（窗口）
，$card=$（'.round-card-slick'）
，开关滑；
toggleSlick=函数（）{
如果（$window.width（）<450）{
$card.slick（）；
}否则{
$card.unslick（）；
}
}
$window.resize（toggleSlick）；
切换滑头（）；
});

---

为了更进一步，最好限制窗口。调整回调大小，以便仅每隔500毫秒左右调用

toggleSlick

。

问题是，即使在取消单击后，unslick仍会继续启动resize，这反过来会破坏它。我同事想出的一个解决办法是这样的

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

更新：

---

解决方案是

slick

插件中的内置功能&@James Daly的答案是这个问题的真实答案。

顺便说一句，现在您可以直接在slick responsive settings对象中执行此操作

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

---

以下是我的做法：

var init={
自动播放：对，
无限：是的，
cssEase：“线性”，
幻灯片放映：1，
幻灯片滚动：1}；
$（函数（）{
var win=$（窗口）；
变量滑块=$（“.slider”）；
win.on（“加载调整大小”，函数（）{
if（win.width（）<576）{
滑块.not（“.slick初始化”）.slick（init）；
}else if（slider.hasClass（“slick初始化”））{
滑块。光滑（“不光滑”）；
}
});
});

由于某种原因，我发现当我设置了

mobileFirst:true

时，它的工作原理与我预期的相反。以下是对我有效的方法（仅在手机上显示滑块）

您可以使用此代码

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

$（文档）.ready（函数（）{
$（窗口）。调整大小（函数（）{
如果（$（窗口）.width（）<450）{
$（'.round card slick'）。slick({
});
}否则{
$（'round card slick'）。slick（'unslick'）；
}
});

---

}))

您的代码使slick仅在450及以下运行。发生的事情超过450起。你说它不能正常工作。这是否意味着，它仍在工作？它应该被禁用。你是对的，我没有在加载时初始化slick。问题是unslick在不应该开火的时候开火了。看看我的答案。谢谢你的帮助。@James Daly的回答是正确的做法，这不正是他们想要的吗？他们只希望Slick在手机上处于活动状态，而不是在桌面上。当窗口小于等于480px时，上面的代码会触发Slick。当设置断点极端宽度（如5000）时，它会起作用，但当设置为默认值时，以及在响应断点480上使用slickjs设置时，不知何故它不起作用。请参见此处：对于要在移动设备上使用的上述代码，请添加此设置，

mobileFirst:true

这可以正常工作，但当视口再次低于480px时，平滑将消失（因为未单击…）

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
                }
            } ```

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