Sunday, 2 September 2012

Very Simple Jquery slider

The basic thing to create a slider is we need at least 2 images and Jquery plugin. Slider concept is we have to show only one image at a time and have to hide other images, if we understood this concept the slider can be done as follows.


Html code. Just include 3 images under some div tag.

<div>
<image  src="src1.jpg" id="img1" class="images">
<image  src="src1.jpg" id="img2" class="images">
<image  src="src1.jpg" id="img3" class="images">
</div>


Slider images working based on some interval, i.e for 3-4 secs we have to display a image, then we have to hide hide the current image and show next image.


var c=0;
var i=1;
function starttime()
{
   c=c+1;
  setTimeout("starttime()",1000);
  if(c%4==0)
{
         $(".images").hide('slow');
         if(i>3)
{
i=1;
}
else
{
i++;

}

var showimage="#img"+i;
$(showimage).show(slow'');

}
}