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.
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();
}
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.
Hi, I'm Vincy. I help build websites, grow businesses, big and small. If that is what you want, contact me.
I'm currently available for freelance work.