Pause Resume Slider using jQuery

In 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 mouseover, mouseout 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

This jQuery code tutorial was published on April 27, 2015.

↑ Back to Top