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轮播-swipeToSlide仅允许滚动2张或更多张幻灯片

1 个答案: