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.

View Demo

HTML Slider Images

This code shows the images added to the slider window.

<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.

$.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

$("#slider-div").startSlider();

View DemoDownload