Pb28 jQuery Image Slider
In this tutorial, we are going to see an example of image slider using jQuery. In the previous tutorial, we have seen already how to run jQuery slide show.
In this example, we are using jQuery UI library to create image slider. In this image slider, we are using slide effect of this library.
HTML Slider Images
This code shows the images added to the slider window.
html
<div id="slider-div">
<img class="img-slide" src="1.jpg">
<img class="img-slide" src="2.jpg">
<img class="img-slide" src="3.jpg">
<img class="img-slide" src="4.jpg">
</div>
jQuery UI Slide Effect
This script uses jQuery UI library to add slide effect for the sliding images.
javascript
$.fn.startSlider = function(){
var simgderDIV=this;
var img=simgderDIV.find(".img-slide");
simgderDIV.css({overflow:"auto"});
img.css({position:'absolute'});
img.hide().first().show().addClass("active");
var iterateTickerElement = function() {
setInterval(function(){
var next = $(".img-slide.active").next();
$(".img-slide.active").hide("slide",{direction:'left'},2000);
$(".img-slide.active").removeClass("active");
if(next.length == 0) next = $(".img-slide").first();
next.addClass("active");
next.show("slide",{direction:'right'},1000);
},2000);
}
iterateTickerElement();
}
and call this script like as follows after DOM is ready
javascript
$("#slider-div").startSlider();