How to Make A Reusable Image Slideshow HTML Component With Vanilla JavaScript

The image slide show I am making has no animation. The mechanism for displaying different slide is by using the display CSS property. The image with display none will not show, while the one with display block will. I will start build one that relys on HTML code then I will build one that relys on JavaScipt that renders the slide show onto the webpage.

HTML Slideshow

Setup

A HTML image slide show can follow the following logic:

• An image is shown and the others are hidden, by defining the CSS display property to "block" to show and "none" to hide.
• An index is used to control the CSS display property of each slide with the initial index of 1.
• On initiation, all image tags for the slide show will be given the CSS property correspoding to whether it's shown or not.
• A left arrow and a right arrow are used to control the index with onclick event handlers.
• In order to position the left and right control arrows, we need to set CSS property of the slide show container to "position:relative;display:inline-block" and arrow position to absolute. Details are in the article.

>

<

<style>
	.left{
		left:0;
	}

	.right{
		right:0;
	}

	.arrow{
		position:absolute;
		top:49%;
		padding:4px;	
		background-color:lightgrey;
		opacity:0.5;
	}

	.arrow:hover{
		cursor:pointer;
		background-color:lightgreen;
	}
</style>
<div id = "myImageSlideShow" style = "position:relative;display:inline-block">
	<img src = "1.png" style = "display:block">
	<img src = "2.png" style = "display:none">
	<img src = "3.png" style = "display:none">
	<div class = "right arrow" onclick = "slide(1)">></div>
	<div class = "left arrow" onclick = "slide(-1)"><</div>
</div>
<script>
 var imagesa = myImageSlideShow.querySelectorAll('img');
 var id = 0;
 function slide(n){
	var l = imagesa.length;
 	id += n;
	id = id >= l ? 0 : id;
	id = id < 0 ? l-1 : id;
	imagesa.forEach((image,i)=>{
		image.style.display = i == id ? 'block':'none';
	})	
 };
</script>

Make My Image Slide Show Reuseable

The problem with the above image slide show is that it's not easily reusable. Imaging there are 2 image slider, we will need to index variables that are controlled by two functions. Then, our JavaScript code can be quite messy.

One way to do solve some of this problem is to create image slide show object.

>

<

<div id = "myImageSlideShow_1" style = "position:relative;display:inline-block">
	<img src = "1.png" style = "display:block">
	<img src = "2.png" style = "display:none">
	<img src = "3.png" style = "display:none">
	<div class = "right arrow" onclick = "slideshowobj_1.slide(1)">></div>
	<div class = "left arrow" onclick = "slideshowobj_1.slide(-1)"><</div>
</div>
<script>
var slideshowobj_1 = {
	images:myImageSlideShow_1.querySelectorAll('img'),
	id:0,
	slide:function(n){
		var l = this.images.length;
		this.id+=n;
		this.id = this.id >= l ? 0 : this.id;
		this.id = this.id < 0 ? l-1 : this.id;
		this.images.forEach((image,i)=>{
		image.style.display = i == this.id ? 'block':'none';
		})
	}
}
</script>	

Still Problematic

With the above code, the image slide show has become more reusable. But when creating a new slide show, not only do we need to create a new slide show object, but also define the onclick event of the right and left arrows. Our goal is to have a image slide show HTML conponent that can be reused with the slightest change to any code.

One Soution is with the Use of Functions

We can define a function such that when it's executed an image slide show is created. This is the same with using class. In other word, we can instantiate an image slide object and display it on the browser.

Setup

<div id = "myImageSlideShow_2"></div>
<script>
var images = ['1.png','2.png','3.png'];

function createSlideShow(id,images,name){
	this.container = document.getElementById(id);
	this.container.style.position = "relative";
	this.container.style.display = "inline-block";
	this.l = images.length;
	this.id = 0;
	for(let i = 0; i<this.l;i++){
		this.container.innerHTML += `<img src = ${images[i]} style = "display:${this.id==i?'block':'none'}">`
	};
	this.container.innerHTML += `
			<div class = "right arrow" onclick = "${name}.slide(1)">></div>
			<div class = "left arrow" onclick = "${name}.slide(-1)"><</div>
		`;
	this.images = this.container.querySelectorAll('img');
	this.slide = function(n){
		this.id+=n;
		this.id = this.id >= this.l ? 0 : this.id;
		this.id = this.id < 0 ? this.l-1 : this.id;
		this.images.forEach((image,i)=>{
		image.style.display = i == this.id ? 'block':'none';
		})
	}
}	
// Create an imageslide show object 
var someslideshow = new createSlideShow('myImageSlideShow_2',images,'xxxx');
</script>