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.

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.

• javascript
• jquery

• i fail to see how this is a php problem – Rotimi Commented May 14, 2018 at 11:14
• isn't this slidesToShow: 4, an issue? – Rotimi Commented May 14, 2018 at 11:14
• there is no php error.. – Farz Ad Commented May 14, 2018 at 11:18

2 Answers 2

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

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.