Pause And Resume Image SlideShow Using jQuery

Saturday, Apr 8, 2017

Tags:- 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.So 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.You may also like Basic Image Slideshow With Previous And Next Button Using jQuery


See Demo
Pause Resume Slideshow Using jQuery


To Create Notification Bar It Takes Only Three Steps:-

  1. Make a HTML file and define markup for slideshow
  2. Make a js file and define scripting for slideshow
  3. 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 and 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 then 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.

Join Us With Our 21000+ Subscribers And Get Our Latest Tutorials Update Via Email