Javascript 仅在移动屏幕尺寸上使用 slick.js
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26004201/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Only use slick.js on mobile screen size
提问by user1406737
I only want the slick.js plugin to be active when on a mobile screen size, let's say under 450px for example. I want this to happen on either page load or browser resize. Slick.js does work properly if I load the page or resize to the correct width but not if I resize the browser to greater than 450px. Can this be done?
我只希望 slick.js 插件在移动屏幕大小时处于活动状态，例如低于 450px。我希望在页面加载或浏览器调整大小时发生这种情况。如果我加载页面或调整到正确的宽度，Slick.js 确实可以正常工作，但如果我将浏览器的大小调整到大于 450 像素，则不能正常工作。这能做到吗？
$(document).ready(function(){
$(window).resize(function(){
if($(window).width() < 450) {
$('.round-card-slick').slick({
});
} else {
$('.round-card-slick').unslick();
}
});
});
采纳答案by user1406737
The problem is unslick keeps firing on resize even after it has been unslicked, which in turn, breaks it. A work around that my coworker came up with goes like this check..
问题是 unslick 即使在 unslick 之后也会继续触发调整大小，这反过来又破坏了它。我的同事想出的解决方法就像这张支票。
var target = $('.slick-mobile-gallery');
if(target.hasClass('slick-initialized'))
target.unslick();
Update:
更新：
The solution is built-in feature in slickplugin & @James Daly's answer is the true answer to this question.
解决方案是slick插件中的内置功能，@James Daly 的回答是这个问题的真正答案。
回答by James Daly
btw now you can do this directly in the slick responsive settings object
顺便说一句，现在您可以直接在光滑的响应式设置对象中执行此操作
mobileFirst: true,
responsive: [
{
breakpoint: 480,
settings: "unslick"
}
]
回答by animatedgif
Your problem is that the function is not run on page load because it's only setup to be called on window resize.
您的问题是该函数未在页面加载时运行，因为它仅设置为在调整窗口大小时调用。
$(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();
});
To take this one step further it would be a very good idea to throttle the window.resize callbacks so that toggleSlickis only called every 500ms or so.
为了更进一步，最好限制 window.resize 回调，这样它toggleSlick只会每 500 毫秒左右调用一次。
回答by DriftwoodJP
Here's how I'd go about it: https://codepen.io/DriftwoodJP/pen/exxgxK
这是我的方法：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");
}
});
});
回答by ilibilibom
I found for some reason that when I have the mobileFirst: trueset it works the opposite than what I would expect. Here's what worked for me (displaying the slider only on mobile)
出于某种原因，我发现当我拥有该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
}
} ```
回答by Parveen Jangra
you can use this code
你可以使用这个代码
$(document).ready(function(){
$(window).resize(function(){
if($(window).width() < 450) {
$('.round-card-slick').slick({
});
} else {
$('.round-card-slick').slick('unslick');
}
});
});
});
