How do we make basic image slideshow in JavaScript?

Basic image slideshow

As you know, a slideshow is made up of several images and videos changing over time. So how do you create a simple image slideshow using Javascript?

First, we enter our IMG tag in the HTML section.

Then we give it name , width and height . These values ​​may change depending on your wishes. Now, we select the images to use in the slideshow according to the dimensions we have specified in the img tag. If you have difficulty finding a picture, you can find pictures of the desired size on the Internet. You can use the JavaScript section by copying the address of the images from those pages.

<h1>How do we make basic image slideshow in JavaScript?</h1>
<img name = "slide" width="600px" height="550px">

After completing our small code on the Html side, let’s move on to the main part, JavaScript. First of all, let’s define a variable that will change our images constantly:

var i = 0;

Next, we define a variable to be able to use the images whose addresses we copied:

var images = [
'https://i.picsum.photos/id/930/600/550.jpg?hmac=kKHfKs3qsuq7uoEIS7Ur-1vQTxDRK7gX1skPd96rIaY' ,
'https://i.picsum.photos/id/788/600/550.jpg?hmac=1xjDBtOo_s0Vmd0GWOSx94e_gVSL0U4FbJeqkQuazKs' ,
'https://i.picsum.photos/id/929/600/550.jpg?hmac=_g-KQ7PUQeAYYlaEOGhCv-r9pnk1NWaF_wC6fMDdBsQ' ,
'https://i.picsum.photos/id/969/600/550.jpg?hmac=DY_HHMaA2njmR8OsUWzjJtdskvCHzpPjQwx4bG8gOJw' ,
];

As we said at the beginning, a slideshow is made up of images changing over time. Now we have to set that time interval:

var timeDuration = 2000; //(1000 = 1 second)

Now we create a function to gather all our variables together and do the main work.

function slideFunction () {}

The first thing we will do is associate the images variable in the HTML section with the img tag in the JavaScript section. To do this:

document.slide.src = images [i];

Now we need to write code that will allow our images to rotate consistently.

if ( i < images.length - 1) {
i++;
}
else {
i = 0;
}

While looking at this code, you may ask why i < images.length — 1?

Let’s discuss this after completing our code.

Now let’s apply the time duration to our function:

setTimeout( "slideFunction()", timeDuration);

Pictures will now appear in the time interval we applied, and after that interval, pictures will move to another picture.

Now we need to make sure that the codes we write are visible on our website. To do this:

window.onload = slideFunction();

With the help of this code, all the codes we write within the slideFunction function will start working after the web page is fully loaded.

Let’s put together all the codes we wrote:

var i = 0;
var images = [
'https://i.picsum.photos/id/930/600/550.jpg?hmac=kKHfKs3qsuq7uoEIS7Ur-1vQTxDRK7gX1skPd96rIaY' ,
'https://i.picsum.photos/id/788/600/550.jpg?hmac=1xjDBtOo_s0Vmd0GWOSx94e_gVSL0U4FbJeqkQuazKs' ,
'https://i.picsum.photos/id/929/600/550.jpg?hmac=_g-KQ7PUQeAYYlaEOGhCv-r9pnk1NWaF_wC6fMDdBsQ' ,
'https://i.picsum.photos/id/969/600/550.jpg?hmac=DY_HHMaA2njmR8OsUWzjJtdskvCHzpPjQwx4bG8gOJw' ,
];
var timeDuration = 2000;
function  slideFunction() {
document.slide.src = images[i];
if ( i < images.length - 1) {
i++;
}
else {
i = 0;
}
setTimeout( "slideFunction()", timeDuration);
}
window.onload = slideFunction();

In the end, if we run our code, we will get the same project as in the video.

Now let’s look at the question we faced above. Why not i < images.length , i<images.length-1 ?
To understand this clearly, let’s examine and compare both cases.

i < images.length-1

i < images.length

As you can see in the difference, when we use i <images.length, it eventually returns an empty value. It is advisable to use i <images.length-1, as this distorts the slide image.