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

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

Slick.js carousel - swipeToSlide only allows scrolling 2 or more slides

javascript

jquery

carousel

slick.js