Creating A Extremely Simple Image Slideshow Using jQuery

An extremely simple jQuery slider plugin used to create a image slideshow with fade-in and fade-out transitions.

How to use it:

1. Create the html for the slideshow.

<div id="slideshow">
<div> <img src="img/img1.jpg"> </div>
<div> <img src="img/img2.jpg"> </div>
<div> <img src="img/img3.jpg"> </div>
</div>

2. Include the jQuery library at the end of your document.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 

3. The CSS

#slideshow > div {
position: absolute;
top: 1px;
left: 1px;
}

4. The javascript.

<script>
$(function() {

$("#slideshow > div:gt(0)").hide();

setInterval(function() { 
  $('#slideshow > div:first')
    .fadeOut(1000)
    .next()
    .fadeIn(1000)
    .end()
    .appendTo('#slideshow');
},  2500);

});
</script>

---

This awesome jQuery plugin is developed by dmurana. For more Advanced Usages, please check the demo page or visit the official website.