How to create image slideshow using Javascript

Last updated on June 7th, 2022 at 12:55 pm

In this tutorial we will create a simple image slideshow with control using Javascript.

First let us take a look at the main function displaynext(shift), this will receive the value of shift(1 or -1, the value we pass every time ) based on the navigational buttons clicked.

function displaynext(shift){
 present_slide=present_slide + shift;
 if(images.length > present_slide && present_slide >= 0){
document.images['im'].src = images[present_slide];
var next_slide=present_slide + 1;
download(next_slide); // Download the next image
}
if(present_slide+1 >= images.length ){
document.f1.Next.style.visibility = "hidden";
present_slide=images.length-1;
 }else{document.f1.Next.style.visibility = "visible";}
if(present_slide <= 0 ){
document.f1.Prev.style.visibility = "hidden";
 present_slide=0;
}else{
 document.f1.Prev.style.visibility = "visible";}
 }

The value should be between 0 and number of element in the array. Once the if condition is satisfied, by using the .src property of the image element we display the image. In the next line we will download the next image to be shown at background to cache. This way the following images can be shown immediately without any time delay.

At the time of page load we will pass a value of 0 to displaynext function to display the first element of the image array. While displaying this first element since the present slide value will be 0 so the previous button will not be visible.

You might also be interested in other similar tutorials related to Image/Text slideshow ,

Automatic Image SlideShow Using Jquery
Image SlideShow With Navigation
Text slideshow using Javascript

Here is the complete code of the slide show page.

<html>
<head>
<title>Image Slideshow With Controls Using Javascript</title>
<script language="JavaScript">
var present_slide=0;
var images = new Array("https://demo.mistonline.in/images/7-300x168.jpg",
 "https://demo.mistonline.in/images/8-300x168.jpg","https://demo.mistonline.in/images/9-300x168.jpg");
objImage = new Image();
function download(img_src){
 // preload the image file
objImage.src=images[img_src];
}
function displaynext(shift){
 present_slide=present_slide + shift;
 if(images.length > present_slide && present_slide >= 0){
document.images['im'].src = images[present_slide];
var next_slide=present_slide + 1;
download(next_slide); // Download the next image
}
if(present_slide+1 >= images.length ){
document.f1.Next.style.visibility = "hidden";
present_slide=images.length-1;
 }else{document.f1.Next.style.visibility = "visible";}
if(present_slide <= 0 ){
document.f1.Prev.style.visibility = "hidden";
 present_slide=0;
}else{
 document.f1.Prev.style.visibility = "visible";}
 }
</script>
 </script></head>
<body onLoad="displaynext(0)">
 <form name="f1" method=post action="">
 <img name="im" /><br />
 <input type="button" name="Prev" value=" << Prev" onClick="displaynext(-1);"/>
 <input type="button" name="Next" value="Next >>" onClick="displaynext(1);">
 </form>
 </body>
 </html>

Make sure to update the images variable with your own

Demo