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 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

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.

Intro Posts