CODEWITHSUNDEEP
javascriptjquery
Farz Ad
Farz Ad

Reputation: 49

slick has empty slides at the end of slider

I have a slick slider and at the end of a slider there are empty slides.

I have more than 10 images at the end of the slides I am getting empty slides.

<div class="responsive slider">
    <div class=""><img src="brands/1.png"/></div>
    <div class=""><img src="brands/2.png"></div>
    <div class=""><img src="brands/3.png"/></div>
    <div class=""><img src="brands/4.png"></div>
    <div class=""><img src="brands/5.png"/></div>
    <div class=""><img src="brands/6.png"></div>
    <div class=""><img src="brands/7.png"/></div>
    <div class=""><img src="brands/8.png"></div>
    <div class=""><img src="brands/9.png"/></div>
    <div class=""><img src="brands/10.png"></div>
</div>

$(document).ready(function(){
  $('.responsive').slick({
    dots: true,
    infinite: false,
    speed: 300,
    slidesToShow: 4,
    slidesToScroll: 4,
  });
});

I am using slick slider plugin.

Upvotes: 3

Views: 6446

Answers (2)

muecas
muecas

Reputation: 4335

You could also change the option infinite to true so two cloned slides (the two first slides) will fill the empty spaces.

Upvotes: 4

Krzysztof Janiszewski
Krzysztof Janiszewski

Reputation: 3834

First of all you do not have more than 10 images, but exactly 10.

Secondly this is because you have slidesToShow: 4 so obviously the last part of 4 images will have two empty slides, because 10 is not devidable by 4.

Solution

Either make number of images devidable by 4 or change slidesToShow so that the number of images is devidable by new value.

Upvotes: 4

Related Questions