Pause Resume Slider using jQuery

by Vincy. Last modified on July 12th, 2022.

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

Vincy
Written by Vincy, a web developer with 15+ years of experience and a Masters degree in Computer Science. She specializes in building modern, lightweight websites using PHP, JavaScript, React, and related technologies. Phppot helps you in mastering web development through over a decade of publishing quality tutorials.

Leave a Reply

Your email address will not be published. Required fields are marked *

↑ Back to Top

Share this page