Карусель Slick.js - swipeToSlide позволяет прокручивать только 2 или более слайдов - PullRequest
Новая
       26

Карусель Slick.js - swipeToSlide позволяет прокручивать только 2 или более слайдов

0 голосов
/ 16 октября 2018

Я пытаюсь реализовать простую карусель, используя 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

Все остальные видят то же самое, что и я?Вы можете щелкнуть и перетащить только один слайд вперед или назад?

Кто-нибудь знает, что можно сделать?Заранее спасибо всем, кто заглянет!

1 Ответ

0 голосов
/ 16 октября 2018

Кажется, проблема slidesToShow: 7.Попробуйте с меньшим значением, например, например.slidesToShow: 3.Смотрите пример ниже: https://codepen.io/MaggieSadler/pen/NGvrNq

...