Slick.js carousel - swipeToSlide仅允许滚动2张或更多幻灯片
Slick.js carousel - swipeToSlide仅允许滚动2张或更多幻灯片
提问于 2018-10-17 03:07:08
我正在尝试使用Slick.js (http://kenwheeler.github.io/slick/)实现一个简单的旋转木马，但由于某些原因，我不能让它只拖动一张幻灯片。
如果我尝试拖动多张幻灯片，该功能可以完美地工作。它只是拖动了一张幻灯片，看起来不会被work...always抓回。
我要做的就是创建一个轮播，并将swipeToSlide设置为true。
HTML
$(document).ready(function(){
$('.customizer-carousel').slick({
slidesToShow: 7,
slidesToScroll: 1,
swipeToSlide: true
});
});.customizer-carousel {
width: 100vw;
}
.customizer-carousel .slick-slide {
border: 1px solid #dadada;
text-align: center;
padding: 50px 0;
}<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
<div class="customizer-carousel">
<div>option 1</div>
<div>option 2</div>
<div>option 3</div>
<div>option 4</div>
<div>option 5</div>
<div>option 6</div>
<div>option 7</div>
<div>option 8</div>
<div>option 9</div>
<div>option 10</div>
</div>
下面是同一件事的代码：https://codepen.io/clearmarble/pen/jeYQLV
是不是每个人都和我看到了一样的东西？您是否能够向前或向后单击和拖动单个幻灯片？
有谁知道可以做些什么吗？提前感谢每一个看过的人！
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-10-17 03:42:12
slidesToShow: 7似乎是你的问题。尝试使用较小的值，如eg。slidesToShow: 3。请参见下面的示例：https://codepen.io/MaggieSadler/pen/NGvrNq
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52842410
复制相关文章
相似问题