我只希望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();
}
});
});
8条答案
按热度按时间kmbjn2e31#
顺便说一句,现在你可以直接在光滑的响应设置对象中这样做
83qze16e2#
问题是unslick在调整大小时仍然会触发,即使在它被unslicked之后,这反过来又会破坏它。我的同事想出的一个办法是这样的。
更新:
解决方案是
slick
插件中的内置功能& @James Daly的答案是这个问题的真实答案。avwztpqn3#
我会这么做https://codepen.io/DriftwoodJP/pen/exxgxK
olmpazwi4#
您的问题是,该函数没有在页面加载时运行,因为它只设置为在窗口大小调整时调用。
为了更进一步,调整窗口大小将是一个非常好的主意。调整回调大小,以便
toggleSlick
每500ms左右被调用一次。soat7uwm5#
我发现由于某种原因,当我设置了
mobileFirst: true
时,它的工作原理与我预期的相反。以下是我的工作(只在移动的上显示滑块)ovfsdjhp6#
你可以用这个代码
});
s4n0splo7#
在选项中设置一个断点为
unslick
滑块,然后在调整大小时(有一个超时以停止触发加载),如果它还没有初始化,则再次光滑它`kb5ga3dv8#
匹配媒体🤘