我漂亮的 slider 旋转木马有一个额外的白色幻灯片。 有什么办法可以摆脱它？

Question

So basically Im using a slick slider and its working fine, however after it gets done sliding through all my images it slides to a blank white background and then resets the slider. Is there any way I can get the slider to reset back to the first slide after it finishes?

Here is the html that I am using:

<section id="home-slider">
<div class="row" style="position: relative;">

  <div class="slider responsive single-item" style="margin-bottom: 0;">
     <div><img src="http://placehold.it/1920x455"/></div>
     <div><img src="http://placehold.it/1920x455"/></div>
     <div><img src="http://placehold.it/1920x455"/></div>
     <div><img src="http://placehold.it/1920x455"/></div>
  </div>

</div>
</section>

And I am also using foundation zurb which is why theres a row class. Here is my javascript to control my slider:

 $(document).ready(function(){
      $('.single-item').slick({
        autoplay: true,
        arrows: false,
        pauseOnHover: false,
        draggable: false,
        mobileFirst: true
      });
    });

Any and all answers are appreciated. Thank you!

Answer 1

$(document).ready(function(){
      $('.single-item').slick({
        autoplay: true,
        arrows: false,
        pauseOnHover: false,
        draggable: false,
        mobileFirst: true
      });

Answer 2

Add the infinite: false property to slider when you initialize it.

 $(document).ready(function(){
    $('.single-item').slick({
        autoplay: true,
        arrows: false,
        pauseOnHover: false,
        draggable: false,
        mobileFirst: true,
        infinite: false
    });
 });