精巧的滑块slidesToScroll
精巧的滑块slidesToScroll
提问于 2018-03-06 04:57:24
我正在使用slick滑块显示5块信息。我把它建在大屏幕上，所以滑块实际上不会滑动。相反，它只显示块，就像浮动div一样。我想在少于768选择的移动设备上做的是显示一些区块，如果用户选择的话，让他们滑动查看所有的区块。我的问题是，在移动设备上，我将slidesToScroll写为1，而它似乎忽略了我写的断点：
$(".xb-reg").slick({
dots: false,
infinite: false,
slidesToScroll: 2,
variableWidth: true,
autoplay: false,
autoplaySpeed: 2000,
responsive: [
{
breakpoint: 768,
settings: {
slidesToScroll: 1
}
}
]
});下面是我的html：
<div class="slider-container">
<div class="xb-reg slider">
<div class="tkr">
Info Block 1
</div>
<div class="tkr">
Info Block 2
</div>
<div class="tkr">
Info Block 3
</div>
<div class="tkr">
Info Block 4
</div>
<div class="tkr">
Info Block 5
</div>
</div>回答 2
Stack Overflow用户
发布于 2018-03-06 16:43:48
Just Remove Variable width True
<!DOCTYPE html>
<html lang="en">
<head>
<title>Pratice</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.js"></script>
</head>
<body>
<div class="slider-container">
<div class="xb-reg slider">
<div class="tkr">
Info Block 1
</div>
<div class="tkr">
Info Block 2
</div>
<div class="tkr">
Info Block 3
</div>
<div class="tkr">
Info Block 4
</div>
<div class="tkr">
Info Block 5
</div>
</div>
</div>
<script type="text/javascript">
$(".xb-reg").slick({
dots: false,
slidesToScroll: 2,
slidesToShow: 3,
autoplay: false,
autoplaySpeed: 2000,
responsive: [{
breakpoint: 768,
settings: {
slidesToScroll: 1,
slidesToShow: 1,
}
}]
});
</script>
</body>
</html>Stack Overflow用户
发布于 2018-03-06 22:54:24
多亏了Manish，我能够对代码和css进行一些调整，以得到我需要的解决方案。
$(".xb-reg").slick({
dots: false,
infinite: false,
arrows: false,
variableWidth: true,
slidesToShow: 3,
autoplay: false,
autoplaySpeed: 2000,
responsive: [
{
breakpoint: 9999,
settings: "unslick"
},
{
breakpoint: 768,
settings: {
slidesToShow: 2,
}
}
]
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/49119343
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号