jQuery Image Slider

In this tutorial we are going to see an example of image slider using jQuery. In 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

jquery-image-slider

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

This PHP code tutorial was published on April 22, 2015.

↑ Back to Top