Web Designing Tutorials

How to Add Multiple Slideshows on One Page Using Javascript

Google+ Pinterest LinkedIn Tumblr

Most of our visitors asked “How to Add Multiple Slideshows on One Page Using JavaScript” by commenting on different previous posts for JavaScript slideshow and going to write this post about to add multiple slideshows on the same page. Using this script you can add number of slideshows on single page as your requirements. 

Multiple Slideshows on One Page Using JavaScript


To make multiple slideshows, at first you have to make variable lists for each slideshows and have to create new slideshow using function slideshow( ). Here I have created two slideshows with variables SlideList1 and SlideList2 and uses function slideshow with parameters slideList, image, speed and name.

You can create number of new slideshows using this function below using new keyword. i.e. var slideshow1=new slideshow(slideList1, ‘slide1’, 3000, ‘slideshow1’);

function SlideShow(slideList, image, speed, name)          
{
  this.slideList = slideList;
  this.image = image;
  this.speed = speed;
  this.name = name;
  this.current = 0;
  this.timer = 0;
}

And the another function switchImage( ) given below allows you to  change images while playing slideshows.

function switchImage(imgName, imgSrc) 
{
  if (document.images)
  {
    if (imgSrc != "none")
    {
      document.images[imgName].src = imgSrc;
    }
  }
}

Here is a full JavaScript code for making multiple slideshows on one page using JavaScript. Copy the following codes inside body tag of your HTML file and replace given image source <img src=” “> with your image source.

<img src="image1.gif" name="slide1">
<img src="image2.gif" name="slide2">
<script type=text/javascript>
var SlideList1 = ['image1.gif', 'image2.gif', 'image3.gif'];
var SlideShow1 = new SlideShow(SlideList1, 'slide1', 3000, "SlideShow1");
var SlideList2 = ['image4.gif', 'image5.gif', 'image6.gif'];
var SlideShow2 = new SlideShow(SlideList2, 'slide2', 1000, "SlideShow2");
function SlideShow(slideList, image, speed, name)          
{
  this.slideList = slideList;
  this.image = image;
  this.speed = speed;
  this.name = name;
  this.current = 0;
  this.timer = 0;
}
function switchImage(imgName, imgSrc) 
{
  if (document.images)
  {
    if (imgSrc != "none")
    {
      document.images[imgName].src = imgSrc;
    }
  }
}
SlideShow.prototype.play = SlideShow_play;  
function SlideShow_play()       
{
  with(this)
  {
    if(current++ == slideList.length-1) current = 0;
    switchImage(image, slideList[current]);
    clearTimeout(timer);
    timer = setTimeout(name+'.play()', speed);
  }
}
window.onLoad=SlideShow1.play();SlideShow2.play();
</script>
Here the speed of first and second slideshows are specified 3000 and 1000 respectively, your can change them as your requirements. Also you can add more slideshows by adding more slideList and slideshow variables.

Preview of  JavaScript Code Given Above

slide1

slide2

var SlideList1 = [‘https://1.bp.blogspot.com/-GnK0rkyg8Kc/VGMQO0EuBUI/AAAAAAAAAls/KaY9M8UjQ9k/s1600/image1.jpg’, ‘http://www.siteforinfotech.com/wp-content/uploads/2014/11/image2.jpg’, ‘http://www.siteforinfotech.com/wp-content/uploads/2014/11/image3.jpg’];
var SlideShow1 = new SlideShow(SlideList1, ‘slide1’, 3000, “SlideShow1”);
var SlideList2 = [‘https://1.bp.blogspot.com/-GnK0rkyg8Kc/VGMQO0EuBUI/AAAAAAAAAls/KaY9M8UjQ9k/s1600/image1.jpg’, ‘http://www.siteforinfotech.com/wp-content/uploads/2014/11/image2.jpg’, ‘http://www.siteforinfotech.com/wp-content/uploads/2014/11/image3.jpg’];
var SlideShow2 = new SlideShow(SlideList2, ‘slide2′, 1000, “SlideShow2”);
function SlideShow(slideList, image, speed, name)
{
this.slideList = slideList;
this.image = image;
this.speed = speed;
this.name = name;
this.current = 0;
this.timer = 0;
}
function switchImage(imgName, imgSrc)
{
if (document.images)
{
if (imgSrc != “none”)
{
document.images[imgName].src = imgSrc;
}
}
}
SlideShow.prototype.play = SlideShow_play;
function SlideShow_play()
{
with(this)
{
if(current++ == slideList.length-1) current = 0;
switchImage(image, slideList[current]);
clearTimeout(timer);
timer = setTimeout(name+’.play()’, speed);
}
}
window.onLoad=SlideShow1.play();SlideShow2.play();

You can add custom CSS codes to give different styles like setting border using border: property, give rounded corners using border-radius property as presented in the previous post “How to make rounded corners border using CSS” and can give different animation effects like fade effects, zoom effects, slide effects etc. 

You can refer to the following previous posts to give fade effect animations using CSS, JavaScript or JQuery codes.

Shuseel Baral is a web programmer and the founder of InfoTechSite has over 5 years of experience in software development, internet, SEO, blogging and marketing digital products and services is passionate about exceeding your expectations.

Write A Comment