JavaScript Image Slider for Beginners
Tags: javascript, beginners, programming, tutorial
Published: 2022-03-14 13:12:48

---
canonical_url: https://softauthor.com/javascript-image-slider-slideshow-carousel/
---

If you’re new to JavaScript, you’ve most likely used some sort of library for an image slider.

In this article, you’re going to learn how to create a simple image slider on your own, but it’s not going to be fancy.

However, you’ll have a strong understanding of building one from scratch by the end of this tutorial.

![alt text](https://softauthor.com/wp-content/uploads/2020/08/javascript-create-a-simple-slider-final.gif)

###Add Static Images In HTML

There are three static images wrapped inside a div element.

Each image has a src attribute with a random image URL from the [picsum](https://picsum.photos) website.

Pretty straight forward.

```HTML
<div>
  <img src="https://picsum.photos/1000/301">
  <img src="https://picsum.photos/1000/302">
  <img src="https://picsum.photos/1000/303">
</div>
```

Next, we will hide all the images by default using CSS and make them appear one by one in order using JavaScript.

###Hide All Images By Default

In CSS, we will set the display property to none and the width to 100% of the img selector.

```CSS
img {
  display:none;
  width:100%;
}
```

At this stage, all of the images will be hidden.

Let’s make the images appear one by one indefinitely using JavaScript.

>✅ *Recommended* 
>*[The Complete JavaScript Course 2020: Build Real Projects!](https://www.udemy.com/course/the-complete-javascript-course/?ranMID=39197&ranEAID=nsrC6aUWa3g&ranSiteID=nsrC6aUWa3g-bFGpwvAeyGrtPuKeQmMXCA&utm_source=aff-campaign&LSNPUBID=nsrC6aUWa3g&utm_medium=udemyads)*

###Show Images One By One

At this stage, you may want to use some sort of loop to achieve this, right?

However, we have another option that fits this case better, which is using the setInterval() method.

The setInterval() method will repeatedly call a function or a code snippet with a fixed time delay between each call.

>*Arguably, the setTimeout() method would be a better fit compared to setInterval() when it comes to performance. For simplicity sake, I’m going to stick with the setInterval() method.*

First, let’s get all the image DOM elements and assign them to an images variable, which will be an array.

```JavaScript
const images = document.querySelectorAll("img");
```

Then, we will call the setInterval() method which takes two arguments:

- A Callback function
- Time

```JavaScript
setInterval(function(){
console.log("I run every 2 seconds indefinitely");
}, 2000)
```

In the above example, the callback function, which is a first argument, will run repeatedly every 2 seconds (2000 milliseconds) which is defined in the second argument.

To show all three images one by one from the images array, we need to increase the index position of the images array by one every 2 seconds.

To do that, define a variable called i outside the setInterval method with an initial value of 0.

```JavaScript
let i = 0;
```

Then, get the first image from the images array using the i variable and make it visible by setting the style.display to block.

```JavaScript
images[i].style.display = 'block';
```

Then increment the variable i by 1;

i++;

When the setInterval() method runs the second time, i becomes 1 and the second indexed image from the images array will be set to display block.

```JavaScript
const images = document.querySelectorAll("img"); 

let i = 0;

setInterval(function(){
  images[i].style.display = 'block';
  i++;
}, 2000);
```

Make sure that the i++ statement is at the bottom. That way we can make sure that when the setInterval() method runs for the first time, the first indexed image from the images array will be visible.

Otherwise, i will be set to 1, the first image will not be displayed and it will skip right to the second.

>✅ *Recommended*
>*[JavaScript Basics for Beginners](https://www.udemy.com/course/javascript-basics-for-beginners/?ranMID=39197&ranEAID=nsrC6aUWa3g&ranSiteID=nsrC6aUWa3g-D4fD_PerzjnPg2npr_cVhQ&utm_source=aff-campaign&LSNPUBID=nsrC6aUWa3g&utm_medium=udemyads)*

###Hide Images On Each Interval

The one problem with the above code is when a second image appears on the screen the first one will still be visible.

The quickest way to hide the previous image is by setting display none to all the images at the start of the setInterval() method using forEach loop.

```JavaScript
const images = document.querySelectorAll("img"); 

let i = 0;

setInterval(function(){
   
 images.forEach( (img, i) => {
    img.style.display = 'none';
  })

  images[i].style.display = 'block';
  i++;

}, 2000);
```

This way, every 2 seconds, the forEach loop runs and sets display style none to all of the images.

Nice!

>✅*Recommended*  
>*[Add Click Events Inside A Loop In JavaScript](https://softauthor.com/javascript-for-loop-click-event-issues-solutions/)*

###Looping The Images Repeatedly

What if the i is equal to or greater than the length of the images array.

For example, we have only three images in the images array, so the last index value would be 3. When the i turns into 4, what will happen?

Well…we will get the following error:

**Uncaught TypeError: Cannot read property ‘style’ of undefined**

So, what we need to do is reset the incrementer i to zero when it turns into 3 so that when the last image is visible it goes back to the first image.

Check to see if i is equal to the images array length above the statement where the image style display is set to block.

```JavaScript
const images = document.querySelectorAll("img"); 

let i = 0;

setInterval(function(){ 

  images.forEach( (img, i) => {
    img.style.display = 'none';
  })

  if( i == images.length) {
    i = 0; 
  }
  
  images[i].style.display = 'block';
  
  i++;

}, 2000);
```

This works great.

However, I find that it is less efficient when we need to loop through all the images every 2 seconds.

Assume you have 100+ images…Yes! That will be inefficient.

>✅ *Recommended*
>[*JavaScript: Understanding the Weird Parts*](https://www.udemy.com/course/understand-javascript/?ranMID=39197&ranEAID=nsrC6aUWa3g&ranSiteID=nsrC6aUWa3g-leFV0tDiwPtdsXAft4ysmw&utm_source=aff-campaign&LSNPUBID=nsrC6aUWa3g&utm_medium=udemyads)

###Refactor The Code

First let’s get rid of everything inside the setInterval() method except the incrementer i.

```JavaScript
const images = document.querySelectorAll("img"); 

let i = 0;

setInterval(function(){ 
// get rid of everything in here
i++;

}, 2000);
```

Then, set the first indexed image display to block if i is equal to 0

```JavaScript
setInterval(function(){ 

  if(i == 0) {
    images[i].style.display = 'block';
  }
  
 i++;
 
}, 2000);
```

When the setInterval() method executes for the second time, get the first indexed image by subtracting i by 1, which gives the previously displayed image, and set its display to none.

Then get the second index image and set its display to block.

```JavaScript
setInterval(function(){ 

  if(i == 0) {
    images[i].style.display = 'block';
  } else {
    images[i - 1].style.display = 'none';
    images[i].style.display = 'block';
  }
  
 i++;
 
}, 2000);
```

That looks nice!

One more scenario to fix.

What if i is equal to the images array length?

Create else if statement where you can check if i is equal to the images array length.

Inside it, set the last indexed image display to none and set the first index image display to block.

Also, reset the incrementer variable i to 0.

```JavaScript
setInterval(function(){ 

  if(i == 0) {
    images[i].style.display = 'block';
  } else if(i == images.length ) {
    images[i - 1].style.display = 'none';
    images[0].style.display = 'block';
    i = 0;
  } else {
    images[i - 1].style.display = 'none';
    images[i].style.display = 'block';
  }
  
 i++;
 
}, 2000);
```

There you have it!

Let me know if you want to add any additional functionality to this simple slider.

>✅ *Recommended*
>[*JavaScript Working with Images*](https://softauthor.com/javascript-working-with-images/)