Customized Image Slider Using JQuery

Want to make a image gallery which has next previous and auto functionality. Its simple, go through the tutorial below ..

HTML code:

The html code is pretty much simple. Have a wrapper Div which has an unordered list.
list the images as much you  want.
Below is the example for the same,

<div id="imageslider"> 

    <ul>

      <li><img src="images/banner1.jpg" alt="banner1" width="908" height="313" /></li>

      <li><img src="images/banner2.jpg" alt="banner2" width="908" height="313" /></li>

      <li><img src="images/banner3.jpg" alt="banner3" width="908" height="313" /></li>

    </ul>

</div>

Css Style :

*{margin:0;padding:0}    /*Reset CSS*/
#imageslider{width:908px;height:313px;overflow:hidden} 
#imageslider ul{list-style:none}
#imageslider ul li{float:left}
a.prevlink,a.nextlink{float:left}
.prevlink{display:block;padding:0 25px 0 15px;}

Jquery Code  :

First include the Latest Jquery Library file, after that you can write the js code in page or make an external file say customslider, save it with extension 'js' which will look as "customslider.js" and include it in your HTML file.

Below is the include code example:

<script type="text/javascript" src="customslider.js"></script>

customslider.js

//Global Varaibles

var licount = 0; 

liwidth = 0; 

var timer; 

var index = 0;

//Main Ready function, called when entire html is ready

 $(document).ready(function() { 

  $("#imageslider ul li").eq(0).addClass("visible"); 

  licount = $("#imageslider ul li").size();

  liwidth = $("#imageslider ul li").outerWidth(); 

  $("#imageslider ul").css({ "width": liwidth * licount });

  timer = setTimeout("autoslider()", 2000); //called the slider function, to begin autoscrolling 

//Previous button click 

$(".prevlink").click(function() { 

   clearTimeout(timer); 

   index = $("#imageslider ul li.visible").index(); 

   if (index !== 0) { 

       index = index - 1; 

    } 

    else { 

      index = licount - 1; 

    } 

   slider(index);

}); 

//Next Button Click

 $(".nextlink").click(function() { 

    clearTimeout(timer); 

    index = $("#imageslider ul li.visible").index(); 

    if (index != licount - 1) { 

       index = index + 1; 

    } else { 

       index = 0;

    } 

    slider(index);  

}); 

}); 

 //Function which takes the index of the current visible image, makes the check if it is last or first image, and  increements the index and passing it as parameter calls the slider function

function autoslider() { 

    index = $("#imageslider ul li.visible").index(); 

    if (index != licount - 1) { 

        index = index + 1; 

    } 

    else { 

       index = 0; 

    }    

   slider(index); 

   clearTimeout(timer); 

   timer = setTimeout("autoslider()", 2000); 

}

//This function addclass to the element li with passed index, removing siblings class

After adding the class it animates the li and after specfied interval autoslider function is called

function slider(_index) {

 $("#imageslider ul li").eq(_index).addClass("visible").siblings("li").removeClass("visible"); 

 $("#imageslider ul").animate({ "margin-left": (-1) * (liwidth * _index) }); 

 timer = setTimeout("autoslider()", 3000); 

}

You can just copy the code, and check it in your local first.

Will be happy to know your suggestions and feedback at ragu556@gmail.com

Happy Blogging :)

Raghvendra