Pause Resume Slider using jQuery

In a previous tutorial, we have seen about how to create jQuery image slider. In this tutorial, we are adding pause resume control to this slider.

We are handling slider pause, resume functions in the mouse over, mouse out events respectively. In this example, we have a boolean variable as a flag based on which the slider’s pause and resume functionalities are handled.

View Demo

jQuery Pause Resume Action

The HTML code for the slider window is same what we have seen in jQuery image slider tutorial. But, the jQuery function is slightly changed for supporting pause and resume action. The script is,

$.fn.startSlider = function(){
	var sliderDIV=this;
	var img=sliderDIV.find(".img-slide");
	
	sliderDIV.css({overflow:"auto"});
	img.css({position:'absolute'});
	img.hide().first().show().addClass("active");
	
	var pause = false;
	var iterateTickerElement = function() {
		setInterval(function(){
			if(!pause) {
			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);
	}

	sliderDIV.hover(
	function(){
		pause=true;
	},
	function(){
		pause=false;
	});	
	iterateTickerElement();
}

View DemoDownload