Simple Slide Show with jQuery

Hi, today i am going to tell you about how to make the simple and easy image slideshow using jquery, it is quite simple and easy to integrate anywhere in your website, i have just used few jQuery methods to complete this simple image slideshow, you can also use this code for text also. let's see how to do this simple slide show.

HTML

in html take the list of images within the UL and LI tags

<ul>
<li><img src="g.jpg" width="560" height="300"></li>
<li><img src="a.jpg" width="560" height="300"></li>
<li><img src="b.jpg" width="560" height="300"></li>
<li><img src="c.jpg" width="560" height="300"></li>
<li><img src="d.jpg" width="560" height="300"></li>
<li><img src="e.jpg" width="560" height="300"></li>
<li><img src="f.jpg" width="560" height="300"></li>
</ul>

CSS

in css give the margin and padding's to be 0 and set the UL position to relative and to LI tag set the position to absolute and make the top and left positions to 0

<style>

ul{list-style:none; margin:0; padding:0; position:relative;}

li{width:560px; height:300px; margin:1px; position:absolute; top:0; left:0;}

</style>

JAVASCRIPT

here i have just used few jQuery animation and siblings methods, here first what i did is i used gt() method gt means (greater than) the usage of this method is select the all elements with in an index number higher than a given a specified number and the index number start with 0

now use this method $('li:gt(0)') i am hiding the images within LI tag and  i used setInterval() function to slide the images with certain time duration, inside the function i am hiding first child of LI tag and showing next LI tag with next() method and after complete all images i just used end() method and appending the all images to UL tag

<script type="text/javascript" src="jquery-1.10.2.min.js"></script>

<script>

$(document).ready(function(){
 
 $('li:gt(0)').hide();

 setInterval(function(){
  
  $('li:first-child').fadeOut().next('li').fadeIn().end().appendTo('ul');
  
 },3000);

 
});
</script>

Live Demo   Download Script