How to Create an Image Slider using jQuery

Posted on Posted in jQuery

In this post we will show your how to create an image slider using jQuery. It is very simple and easy way to create an image slider and we need couple of line of jQuery and a little bit CSS code for that. The slider will be look like bellow.

Lets follow the steps below.

Step 1

First create a html document and paste the following code save it.

<!DOCTYPE html>
<html>
<head>
	<title>FindSourceCode : Simple Image Slider</title>	
  	<link rel="stylesheet" href="css/styles.css"/>
  	<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>

</head>
<body>
	<ul id="slider">
		<li>
			<a href="https://flic.kr/p/pq1UFA">
				<img src="https://c4.staticflickr.com/4/3867/15367978792_acd632254d_h.jpg" alt="Alter Apfelbaum"/>
			</a>
			<p>Alter Apfelbaum</p>
    	</li>
    	<li>
        	<a href="https://flic.kr/p/ppXtn4">
            	<img src="https://c3.staticflickr.com/3/2942/15367308281_cf8a164414_h.jpg" alt="Ruth St Flowers-191"/>
        	</a>
        	<p>Ruth St Flowers-191</p>
    	</li>
    	<li>
        	<a href="https://flic.kr/p/pq5a4k">
            	<img src="https://c4.staticflickr.com/4/3862/15368612485_251ef5de2f_h.jpg" alt="Canada Close In."/>
        	</a>
        	<p>Canada Close In.</p>
    	</li>
	</ul>
	<script src="js/scripts.js"></script>
</body>
</html>

Here we in the body of the html page we add some list item. Each of these list item contains a link and inside the link element we add an image element.

Step 2

Now create a css file and put the following code segment and save it. Remember to add this stylesheet in the html page.

#slider	{ 
    position:relative;
    margin:0;
    padding:0;
    list-style-type:none;
    width:650px;
    height:430px;
    border: 1px solid #008000;     
    overflow:hidden; 
}
#slider li { 
    position:absolute;        
}
#slider img {
    width:650px;
    height:430px;    
}
#slider p { 
    position:absolute;
    bottom:0;
    padding:20px;
    color:#ffffff;
    background-color: #008000;
    opacity: 0.6;
    margin:0;
    left:0;
    right:0; 
}

Step 3

Now create a javascript file and put the following code segment and save it.

$(function(){
	$('#slider li').hide().filter(':first').show();
	setInterval(slideshow, 3000);
});

function slideshow() {
	$('#slider li:first').fadeOut('slow').next().fadeIn('slow').end().appendTo('#slider');
}

Now look at line 6 of the above code segment. Here we write a function slideshow which take the first item of the list and fadeout this and then take the next item and fade this in. Then we call a method .appendTo(“#slider) which takes the first list item and append it to the list. the .end() method ensure that it is append as the last list item. For the viewer it seems that the list is rotating and when the last list item fadeout the first list item fadein. Hopefully you understand the process. Please ask your question at the comment.

Download Source Code

Books you should read

jQuery: Novice to Ninja
Head First jQuery: A Brain-Friendly Guide (Brain-Friendly Guides)
Pro jQuery 2.0 (Expert's Voice in Web Development)

About Md. Moin Uddin

I love to research on new technology and try to play with those. It makes my work really enjoyable.

Leave a Reply

Your email address will not be published. Required fields are marked *

16 − fifteen =