Slick.js carousel - swipeToSlide 只允许滚动 2 个或更多幻灯片

Question

我正在尝试使用 Slick.js (http://kenwheeler.github.io/slick/) 实现一个简单的轮播，但由于某种原因，我无法让它只拖动一张幻灯片。

如果我尝试拖动多张幻灯片，则该功能可以完美运行。它只是拖动一张似乎不起作用的幻灯片...总是弹回。

我所做的只是创建一个旋转木马，并将 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

其他人看到的和我一样吗？您可以单击并向前或向后拖动一张幻灯片吗？

有人知道可以做什么吗？提前感谢任何看一看的人！

Answer 1

slidesToShow: 7 似乎是您的问题。尝试使用较小的值，例如。 slidesToShow: 3。 请参见下面的示例： https://codepen.io/MaggieSadler/pen/NGvrNq