CODEWITHSUNDEEP
javascriptjquerycarouselslick.js
StrangeBiscuit
StrangeBiscuit

Reputation: 35

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

I'm trying to implement a simple carousel using Slick.js (http://kenwheeler.github.io/slick/) and for some reason I can't get it to drag just one slide.

If I attempt to drag more than one slide the functionality works perfectly. It's just dragging a single slide that wont seem to work...always snaps back.

All I'm doing is creating a carousel with swipeToSlide set to 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/[email protected]/slick/slick.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/[email protected]/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>

Here's a codepen of the same thing: https://codepen.io/clearmarble/pen/jeYQLV

Is everyone else seeing the same thing as me? Are you able to click and drag just a single slide forwards or backwards?

Anybody have any idea what could be done? Thanks in advance to anybody who takes a look!

Upvotes: 1

Views: 8409

Answers (1)

Bloeh
Bloeh

Reputation: 26

The slidesToShow: 7 seems to be your problem. Try with a smaller value like eg. slidesToShow: 3. See the example below: https://codepen.io/MaggieSadler/pen/NGvrNq

Upvotes: 1

Related Questions