Here is a simple Jquery code to make a slider.

HTML CODE:

<div class="container">
			<ul class="clearfix slider">
				<li  class="active">
					<img src="img/img1.jpg">
				</li>
				<li>
					<img src="img/img2.jpg">
				</li>
				<li>
					<img src="img/img3.jpg">
				</li>
			</ul>
			<ul class="clearfix navigation">
				<li class="prev"><a ><<</a></li>
				<li class="next"><a >>></a></li>
			</ul>
		</div>

CSS CODE:

container{width: 100%;height:350px;margin: 0 auto;position: relative;background-color: #555}
.slider{padding: 0;position: relative;height: 100%;width: 100%}
.slider li{display: none;position: absolute;left: 0;top: 0;height: 100%;width: 100%}
.slider li:nth-child(1){display: block;}
.slider img{width:100%;height:100%;display: block;}
.navigation{position: absolute;width: 100%;top: 50%;left: 0}
.navigation li{cursor: pointer;height: 25px;width: 40px ;background-color: #ccc}
.navigation li.prev{float: left;position: relative;}
.navigation li.next{float: right;position: relative;}
.navigation li.prev a{text-decoration: none;color: red;font-size: 20px;position: absolute;left: 0px;top: 0}
.navigation li.next a{text-decoration: none;color: red;font-size: 20px;position: absolute;right: 0px;top: 0}

JQUERY CODE:

<script type="text/javascript">
		$(document).ready(function(){
			function movePrev(){
				if($('.slider li.active').is(':not(:first-child)'))
				{
					$('.slider li.active').removeClass("active").fadeOut("slow").prev().addClass("active").fadeIn("slow");
				}
				else{
					$('.slider li.active').removeClass("active").fadeOut("slow");
					$('.slider li:last-child').addClass("active").fadeIn("slow");
				}
			}
			function moveNext(){
				if($('.slider li.active').is(':not(:last-child)'))
				{
					$('.slider li.active').removeClass("active").fadeOut("slow").next().addClass("active").fadeIn("slow");
				}
				else{
					$('.slider li.active').removeClass("active").fadeOut("slow");
					$('.slider li:first-child').addClass("active").fadeIn("slow");
				}
			}
			$(".prev a").click(function() {
				movePrev();
			});
			$(".next a").click(function(){
				moveNext();
			});
			setInterval(function () {
	       			moveNext();
    			}, 5000);
		});
</script>

When user click on .prev or .next links the appropriate function is called i.e., movePrev() and moveNext().

The condition inside the function is set in such a way the slider will animate infinitely i.e., in movePrev() if the current frame is not the first frame then it will move to previous frame. But if the current frame is the first frame then it will move to the last frame in the slider.

Same operation is performed in the moveNext() function.

To make the slider auto animate i have used setInterval() function, and inside that function called moveNext() function. The  time interval is set to 5 seconds.

setInterval(function () {
                       moveNext();
                }, 5000);

Here is JS FIDDLE Link:

https://fiddle.jshell.net/8v8c5js0/8/