Pause And Resume Image SlideShow Using jQuery

Last Updated : Jul 1, 2023

IN - jQuery | Written & Updated By - Riya

In this tutorial we will show you how to pause and resume image slideshow or i can say any slideshow using this method using jQuery, Image slideshow is the best way to display multiple images efficiently and effectively.

Sometimes user wants to control the slideshow like to pause the slideshow, resume the slideshow, go to the previous or next slide etc.

You may also like Basic Image Slideshow With Previous And Next Button Using jQuery

CHECK OUT THIS TUTORIAL LIVE DEMO →

To Create Notification Bar It Takes Only Three Steps:-

Make a HTML file and define markup for slideshow
Make a js file and define scripting for slideshow
Make a CSS file and define styling for slideshow

Step 1. Make a HTML file and define markup for slideshow

We make a HTML file and save it with a name slideshow.html

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="slideshow_script.js"></script>
<link rel="stylesheet" type="text/css" href="slideshow_style.css">
</head>
<body>
<div id="wrapper">
 <input type="button" value="Resume SlideShow" onclick="start_slideshow();">
 <input type="button" value="Pause SlideShow" onclick="pause_slideshow();">
 <div id="image_div">
  <img src="images/image1.jpg">
 </div>
 <input type="hidden" id="image_no" value=1>
</div>
</body>
</html>

In this step we made two buttons to resume and pause slideshow and then we create a div which hold our image and then we create hidden fields which is used to holds image number we initialise this to 1 because we already display first image and want to display 2nd image as per the image array we were going to made in our second step.

You may also like Content Slider Using jQuery And CSS

Step 2. Make a js file and define scripting for slideshow

We make a js file and save it with a name slideshow_script.js

$(document).ready(function(){
 start_slideshow();
});

var interval;

function start_slideshow()
{
 clearInterval(interval);
 var images = ["image1" , "image2" , "image3" , "image4"];
 interval=setInterval(function(){
  var img_no=document.getElementById("image_no").value;
  $("#image_div").fadeOut(300,function(){
   document.getElementById("image_div").innerHTML="<img src='images/"+images[img_no]+".jpg'>";
   if(img_no==3)
   {
    document.getElementById("image_no").value=0;
   }
   else
   {
    document.getElementById("image_no").value=Number(img_no)+1;
   }
  });
  $("#image_div").fadeIn(1500);
 }, 3000);
}

function pause_slideshow()
{
 clearInterval(interval);
}

In this step we made two functions to pause and resume slideshow whenever user clicks on their respective buttons.

In this step we use document.ready function to start the slideshow just after page load and define a variable called interval to clear the intervals to prevents any function collision generally used with setInterval functions.

In first function we first clear all the interval to prevent any function collisions and then we insert images name in image array and use setInterval function to display the next image in every 3 seconds.

Under the setInterval function we get the value of image_no to know what image is going to display then we use jQuery fadeout effect to display the image.

Then if image_no is equal to 3 it means that this is our last image according to array because we use 4 images in array and array index starts from 0 so if the image_no value is 3.

We set the value of image_no to 0 to continue the slideshow from first image it works like a image loop and if the value is not equal to 3 the we just simply increment the image_no value by 1.

In our second function that is pause_slideshow() function we simply use clearInterval method to pause the slideshow.

You may also like Basic Image Gallery With Image Preview Using jQuery

Step 3. Make a CSS file and define styling for slideshow

We make a CSS file and save it with a name slideshow_style.css

body
{
 width:100%;
 margin:0 auto;
 padding:0px;
 background-color:#3B240B;
 font-family:helvetica;
}
#wrapper
{
 text-align:center;
 margin:0 auto;
 padding:0px;
 width:100%;
}
input[type="button"]
{
 background:none;
 border:1px solid #F5D0A9;
 color:#F5D0A9;
 width:150px;
 height:35px;
 border-radius:20px;
 margin:10px;
}
#image_div
{
 margin-top:10px;
}
img
{
 border-radius:3px;
 padding:5px;
 background-color:white;
 max-width:450px;
}

Thats all, this is how to Pause and Resume Image SlideShow using jQuery. You can customize this code further as per your requirement. And please feel free to give comments on this tutorial.

I hope this tutorial on Pause and Resume Image SlideShow using jQuery helps you and the steps and method mentioned above are easy to follow and implement.

CHECK OUT THIS TUTORIAL LIVE DEMO →

About Riya

A recent graduate with a Bachelor of Technology (B.Tech) in Computer Science from India. She is passionate about leveraging technology to solve real-world problems. With a strong foundation and experience in programming languages such as Python, Django, HTML, CSS, and JavaScript, java, php and have honed her skills through hands-on projects and coursework.

Follow Riya On Linkedin 🡪