JavaScript Image Slider for Beginners

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.

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 website.

Pretty straight forward.

<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.

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!

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.

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

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

• A Callback function
• Time

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.

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.

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.

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

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.

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

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.

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

Refactor The Code

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

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

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.

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.

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