Multiple Slideshows on One Page Using JavaScript
Read Also: How to Create JavaScript Image Slideshow with Links
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;
}
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 the first and second slideshows are specified as 3000 and 1000 respectively, you can change them as your requirements. Also, you can add more slideshows by adding more slide lists and slideshow variables.
Preview

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. to your slideshow.
You can refer to the following previous posts to give fade effect animations using CSS, JavaScript, or JQuery codes.
- How to Create Simple JavaScript Fade Effect Animation?
- Simple JavaScript Fade Effect Animation Using Jquery
Comments are closed.