Jquery automatic image slider

$(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 the defined width and speed to the left
	    $slides.animate({'margin-left': '-='+width}, speed, function() {
            //count number of slides and loop back to first from last
			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>