I am currently working on a basic jQuery image slider that is set to slide automatically on a timer. My goal is to make it loop seamlessly, but it seems to be getting stuck after reaching the last slide. As I am relatively new to jQuery, I might be overlooking something obvious. I have been trying to troubleshoot this issue, but haven't been able to identify what's causing the problem. Can anyone offer some guidance?
Below is the code snippet for reference:
$(document).ready(function() {
//INDEX IMAGES SLIDER
$(function() {
//Configuration
var width = 720;
var speed = 1000;
var pause = 3000;
var current = 1;
//Cache DOM
var $slider = $('#slider');
var $slides = $slider.find('#slides');
var $slide = $slides.find('.slide');
setInterval(function() {
//Move image to the left by the defined width and speed
$slides.animate({'margin-left': '-='+width}, speed, function() {
//Count the number of slides and reset to first slide after reaching the last one
current++;
if (current === $slides.length) {
current = 1;
$slides.css('margin-left', 0);
}
});
}, pause);
});
});#slider {
width: 720px;
height: 400px;
overflow: hidden;
}
#slider #slides {
display: block;
width: 2880px;
height: 400px;
margin: 0;
padding: 0;
}
#slider .slide {
float: left;
list-style: none;
height: 400px;
width: 720px;
}
#slider .slide img {
width: 100%;
}<div id="slider">
<ul id="slides">
<li class="slide"><img src="images/sp_1.png"></li>
<li class="slide"><img src="images/ss_1.jpg"></li>
<li class="slide"><img src="images/sd_1.jpg"></li>
<li class="slide"><img src="images/sp_1.png"></li>
</ul>
</div>