This is very simple Jquery base banner slider. If you have lot of images and want to slide then this slider is better for you below are step by step code guide so that you can implement it easily in your site.
Read more: http://designikx.wordpress.com/2012/06/19/auto-image-slideshow-using-jquery/
Step 1 - HTML
copy and paste this code any where you want to show the auto image slideshow in html page.
<div id="show-case">
<img class="img active" src="img/1.jpg">
<img class="img" src="img/2.jpg">
<img class="img" src="img/3.jpg">
<img class="img" src="img/4.jpg">
<img class="img" src="img/5.jpg">
<img class="img" src="img/6.jpg">
</div>
Step 2 - css
Not much css just control the width and height of images. you can use your css as you desire.
<style>
#show-case
{
box-shadow:1px 1px 5px 2px #0d456d;
border-raduius:10px;
height:300px;
margin:10px mg;
width:600px;
}
#show-case img
{
position:absolute;
width:600px;
height:300px;
}
</style>
Final step - java script code
Just copy this jquery code in <head> section of your HTML page
<script>
$(document).ready(function()
{
$('.img:gt(0)').hide();
setInterval(function() {
$(".img:first-child").fadeOut(3000).removeClass('active').next(".img")
.fadeIn(3000).addClass("active").end().appendTo("#show-case")
}, 4000);
});
</script>
Read more: http://designikx.wordpress.com/2012/06/19/auto-image-slideshow-using-jquery/
