JQuery автоматический слайдер изображения

Question

У меня есть базовый слайдер изображения jQuery (код ниже), который автоматически открывается по таймеру. Я бы хотел, чтобы он зациклился, но он застрял после последнего слайда. Я только начинаю с jQuery, поэтому может отсутствовать что-то очевидное, но я не могу понять, что происходит не так! Может ли кто-нибудь помочь?

Вот код ...

$(document).ready(function() { 
 

 
//INDEX IMAGES SLIDER 
 
    $(function() { 
 

 
\t \t //configuration 
 
\t \t var width = 720; 
 
\t \t var speed = 1000; 
 
\t \t var pause = 3000; 
 
\t \t var current = 1; 
 

 
\t \t //cache DOM 
 
\t \t var $slider = $('#slider'); 
 
\t \t var $slides = $slider.find('#slides'); 
 
\t \t var $slide = $slides.find('.slide'); 
 

 

 
\t setInterval(function() { 
 
      //move image the defined width and speed to the left 
 
\t  $slides.animate({'margin-left': '-='+width}, speed, function() { 
 
      //count number of slides and loop back to first from last 
 
\t \t \t current++; 
 
\t \t \t if (current === $slides.length) { 
 
\t \t \t \t current = 1; 
 
\t \t \t \t $slides.css('margin-left', 0); 
 
\t \t \t } 
 
\t \t }); \t \t \t 
 
\t }, pause); 
 
    }); 
 
});

#slider { 
 
\t width: 720px; 
 
\t height: 400px; 
 
\t overflow: hidden; 
 
} 
 

 
#slider #slides { 
 
\t display: block; 
 
\t width: 2880px; 
 
\t height: 400px; 
 
\t margin: 0; 
 
\t padding: 0; 
 
} 
 

 
#slider .slide { 
 
\t float: left; 
 
\t list-style: none; 
 
\t height: 400px; 
 
\t width: 720px; 
 
} 
 

 
#slider .slide img { 
 
\t width: 100%; 
 
}

<div id="slider"> 
 
    
 
\t <ul id="slides"> 
 
     
 
\t \t <li class="slide"><img src="images/sp_1.png"></li> 
 
\t \t <li class="slide"><img src="images/ss_1.jpg"></li> 
 
\t \t <li class="slide"><img src="images/sd_1.jpg"></li> 
 
\t \t <li class="slide"><img src="images/sp_1.png"></li> 
 
     
 
\t </ul> 
 
    
 
</div>

Answer 1

у вас есть небольшая ошибка. $ slides.length равно 1, потому что только один div с этим id. Поэтому то, что вы действительно хотите использовать, это $ slide.length в вашей инструкции if. Потому что на вашей странице есть такое количество слайдов. Поэтому, если вы измените свой оператор if следующим образом, он должен работать:

if (current === $slide.length) {