How to Add Multiple Slideshows on One Page Using Javascript

Most of our visitors asked “How to Add Multiple Slideshows on One Page Using JavaScript” by commenting on different previous posts. So in this article, you will know how to add multiple slideshows on a single page as your requirements along with sample slideshow and its source code.

Multiple Slideshows on One Page Using JavaScript

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

You can create the number of new slideshows using this function below using the 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 another function switchImage( ) given below allows you to change images while playing a slideshow.

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 the body tag of your HTML file and replace the 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, you can change them as your requirements. Also, you can add more slideshows by adding more slide list and slideshow variables.

Preview

First Slideshow

Second Slideshow

You can add custom CSS codes to give different styles like setting borders using border: property. You can also make rounded corners using the border-radius property. As a reference, you can refer to the previous post “How to make rounded corners border using CSS”. This article shows you how to add different animation effects like fade effects, zoom effects, slide effects, etc. on your slideshow.

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