Have you ever seen a slide show embedded in a website and feel wowed, Don’t know if that’s even a word. Sometimes you will want to have this slide show in your websites to display the beautiful and high-quality images you have on your gallery.

In this article, we’re going to be doing just that with the core web language i.e “html”, “css”, and “JavaScript”.

To start with, let’s gather all our images in one folder. We’ll be using three images for this slide show which are “image-1.jpg”, “image-2.jpg”, and “image-3.jpg”. Feel free to use as many images as you like.

Note: Always imclude the format of the images (‘jpg’, ‘png’, ‘gif’ etc).

Now that we’ve stored the images in the folder, we create a file in that folder and name it “index.html”. This is the file where we’re going to write the code for this slideshow.

Step 1.

Creating your container div.

We’re going to create a div to contain all our images with the next button, previous button and indicators.

<div class="container">
<img id="myimg"
src="image-1.jpg>
<button
onclick="previous()">
Prev
</button>

<button
onclick="next()">
Next
</button>
<div class="indicator">

<div class="ind"></div>
<div class="ind"></div>
<div class="ind"></div>

</div>
</div>

Now we want our three indicators to be small so we can easily know the image we’re viewing. So we add the following css code for the indicators.

<style>

.indicators div{
width:15px;
height:15px;
border-radius:50%;
background:white;
position:absolute;
bottom:10px;

}
.indicators
div:first-child{

background:grey;

}

</style>

Now we’ve set our indicators to be located at the bottom of our images. And the first indicator to be colored grey as the page loads. Now lets move into the scripting shall we?

<script>

//Select the image tag.

var image=document.
getElementById("myimg");

//an array containing all my images

var stock=[
'image-1.jpg',
'image-2.jpg',
'image-3.jpg'
];

//the current index.

var index=0;

//The ind class.

var ind=document.
getElementsByClassName
("ind");


//the next button.

function next(){

//Color all the indicators white.

for(var i=0; i<ind.length; i++){

ind[i].style.background=
"white";

}

//increase the index by one.

index++;

//now change the image's src attribute.

image.src=stock[index];


//shade the current index

ind[index].style.background=
"grey";

Let me explain the last few lines a little. Since it’s the first image that shows as the page loads, we decided to set the initial value of our index variable to zero. Now as we clicked our next button, on value of the index is increased by 1 and the src of the image changes to stock[index], which will be interpreted by the browser as stock[1]. This shows that the second element in the array named stock will be used as the src attribute, changing the image on the screen.

Now if we continue with the code above, we notice that once the value of index becomes greater than 2 i.e 3 and above, there is no image displayed on the screen. This is so because there is no value of stock[3] or stock[4] in our stock array. To counter this we’re going to stop our index variable from reaching those values.

var max=stock.length-1;

if(index>=max){
index=0;
}
}

This code takes it back to the first image once the last next button has been clicked.

Now let’s do the same for our previous button shall we?

function previous(){

//Color all the indicators white.

for(var i=0; i<ind.length; i++){

ind[i].style.background=
"white";

}


//Reduce the index by one.

index--;

//now change the image's src attribute.

image.src=stock[index];

//shade the current index

ind[index].style.background=
"grey";

var min=0;stock.length-1;

if(index<0){
index = stock.length-1;

}
}

Now with this, we’ve been able to create our own slide show on button click. We can make the slide show change automatically every three seconds with the set interval function below.

setInterval(next,3000);
</script>

I hope you enjoyed this article. Feel free to leave your feedback in the comments section or send is an email if you wish.

Categories: JavaScript

vic okeke

I'm just a web developer hoping to help out junior developers in algorithms for their projects.

0 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *