jQuery 这可以在桌面上不光滑而在移动设备上光滑吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/43071082/
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
Can this possible to unslick in desktop and slick slide in mobile?
提问by Shahadat
I want to disable slider in desktop but needed slide in mobile, guy's can you help me?
我想在桌面上禁用滑块，但在移动设备中需要滑块，你能帮我吗？
$('.slider').slick({
slidesToShow: 5,
slidesToScroll: 1,
autoplay: false,
autoplaySpeed: 2000,
responsive: [
{
breakpoint: 767,
settings: "unslick"
}
]
});
回答by Tobias Geisler
Much cleaner solutionthan the currently accepted answer: Add the mobileFirst: true,option:
比当前接受的答案更简洁的解决方案：添加mobileFirst: true,选项：
$('.slider').slick({
slidesToShow: 5,
slidesToScroll: 1,
autoplay: false,
autoplaySpeed: 2000,
mobileFirst: true,
responsive: [
{
breakpoint: 767,
settings: "unslick"
}
]
});
This will interpret your breakpoint settings starting from low resolutions, just as want it.
这将从低分辨率开始解释您的断点设置，就像想要的那样。
See the settings section in the Slick documentation.
请参阅Slick 文档中的设置部分。
回答by user1506075
Try this: screen width 9999px to 768px will not be slider
试试这个：屏幕宽度 9999px 到 768px 不会是滑块
('.slider').slick({
slidesToShow: 5,
slidesToScroll: 1,
autoplay: false,
autoplaySpeed: 2000,
responsive: [
{
breakpoint: 9999,
settings: "unslick"
},
{
breakpoint: 767,
settings: {
slidesToShow: 3,
slidesToScroll: 3,
infinite: true,
dots: true
}
}
]
});
回答by Николай Пушкин
Unfortunately my version of #user1506075 did not work without errors. I solved the problem this way:
不幸的是，我的 #user1506075 版本无法正常工作。我是这样解决问题的：
$slickGreen = false;
function greenSlider(){
if($(window).width() < 991){
if(!$slickGreen){
$(".greenSlider").slick({
dots: false,
arrows: false,
slidesToShow: 3,
slidesToScroll: 1
});
$slickGreen = true;
}
} else if($(window).width() > 992){
if($slickGreen){
$('.greenSlider').slick('unslick');
$slickGreen = false;
}
}
};
$(document).ready(function(){
....
greenSlider();
});
$(window).on('resize', function(){
....
greenSlider();
});
回答by Rana Ghosh
Put your code inside a iflike below::
将您的代码放在if如下所示的内容中：
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
$('.slider').slick({
slidesToShow: 5,
slidesToScroll: 1,
autoplay: false,
autoplaySpeed: 2000,
responsive: [
{
breakpoint: 767,
settings: "unslick"
}
]
});
}
Take reference from:: link
从 ::链接中获取参考
回答by Oksana Romaniv
I had a similar problem and solved it with enquire.js(lightweight - around 0.8kb, pure JavaScript library for responding to CSS media queries)
我遇到了类似的问题并使用enquire.js解决了它（轻量级 - 大约 0.8kb，用于响应 CSS 媒体查询的纯 JavaScript 库）
Based on the discussion in this GitHub thread and this commentparticularly, I implemented the solution using enquire.js like so:
基于此 GitHub 线程中的讨论，特别是此评论，我使用 enquire.js 实现了解决方案，如下所示：
$slider = $('#your-slider');
enquire.register('screen and (max-width: 767px)', {
match : function() {
if ( !$slider.hasClass('slick-initialized') ) {
$slider.slick(SliderSettings);
}
},
unmatch : function() {
if ( $slider.hasClass('slick-initialized') ) {
$slider.slick('unslick');
}
}
});
Where SliderSettings is options map, like in your case:
SliderSettings 是选项映射的地方，就像你的情况：
{
slidesToShow: 5,
slidesToScroll: 1,
autoplay: false,
autoplaySpeed: 2000
}
