How to Create a Slideshow with JavaScript?

Whether you are using a website builder or content management system, it is very easy to create a slideshow for your site. For example, WordPress has hundreds of slideshow and gallery plugins to create stunning sliders in minutes. Similarly, site builders like Weebly offers a slideshow element and even a framework like Bootstrap offers a carousel element. However, when you create plain static HTML site there are no options other than inserting your own custom slideshow code. If you are looking for such a standalone slideshow block, here is a complete slideshow code with JavaScript.

Why to Use Slideshow?

Adding a slideshow on your site helps in the followings:

Looks elegant on your web page.
Adding a slideshow on a landing page will attract users.
You can show few important pages on your site in the slides and drive traffic to those pages.

JavaScript Slideshow

Though there are plenty of plugins available to create a readymade slideshow, here is the source code for creating a simple slideshow using JavaScript. You can follow the below two step process to add this slideshow to your website.

1. Script for Slideshow

Copy and paste the below script in the footer section of your web page to insert the slideshow. You can paste the code after the body section of your web page to avoid render blocking resources in Google PageSpeed and improve the page loading speed.

<script type="text/javascript">
// Set slideshow speed in milliseconds
var slideShowSpeed = 3500;
// Set duration of crossfade (seconds)
var crossFadeDuration = 3;
// Specify the image files
var Pic = new Array();
// Just add as many as images as you want one by one
// Replace the images with your own site images
Pic[0] = 'Image1 URL Here'
Pic[1] = 'Image2 URL Here'
Pic[2] = 'Image3 URL Here'
Pic[3] = 'Image4 URL Here'
// do not edit anything below this line
/***********************************************
* Get more website widget codes @ https://www.webnots.com/demos/
***********************************************/
var t;
var j = 0;
var p = Pic.length;
var preLoad = new Array();
for (i = 0; i < p; i++) 
{
preLoad[i] = new Image();
preLoad[i].src = Pic[i];
}
function runSlideShow()
{
if (document.all) 
{
document.images.SlideShow.style.filter="blendTrans(duration=2)";
document.images.SlideShow.style.filter=
"blendTrans(duration=crossFadeDuration)";
document.images.SlideShow.filters.blendTrans.Apply();
}
document.images.SlideShow.src = preLoad[j].src;
if (document.all) 
{
document.images.SlideShow.filters.blendTrans.Play();
}
j = j + 1;
if (j > (p - 1)) j = 0;
t = setTimeout('runSlideShow()', slideShowSpeed);
}
// End -->
</script>

2. HTML for Slideshow

The next step is to copy and paste the below HTML code in <body> section of your page. You can paste this code when you want the slideshow to appear.

<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<img src="" name='SlideShow' width=476 height=301>
</td>
</tr>
</table>
<script type="text/javascript">
runSlideShow();
</script>

Customizing Options for Slideshow

You can customize the appearance of the JavaScript slideshow using the below options.

Replace the images in the script with your won site images.
Add more images by continuing the array like Pic[0], Pic[1], Pic[2], etc.
Adjust the height and width of your slideshow in the HTML code placed in the <body>.
Change the table border, cellpadding and cellspacing attributes to add border to your slideshow.
You can adjust the slideshow and fade duration in milliseconds as per your need.

How It Looks?

The slideshow will look like below and we recommend to use full width images for your layout so that it will look beautiful.

How to Create a Slideshow with JavaScript?

Why to Use Slideshow?