How do i create an auto image slider in html css and javascript?

I am currently learning web development with the OdinProject curriculum. There’s a task which is to create a simple image carousel. It should contain arrows on each side to advance the image forward or backward. It should automatically move forward every 5 seconds. It should contain the little navigation circles at the bottom that indicate which slide you are on (and they should be click-able to advance to that particular slide).

Markup

First, let’s create an html file named index.html.

In the html file, we have a container that serves as a frame for each slide and each slide contains an image.

Styling

Let’s add the styles. I’ll assume you have basic knowledge of CSS for you to want to build an image slider. I’ll try to make the styling basic and simple.

The slide display property is set to nonewhich makes them not visible now. The slide container and heading are centered too. We will add the functionality in the JavaScript to make the slides visible.

Now, let’s style the next and previous buttons and the dots for navigation. Also, add an active class to style the dot for the slide that is currently being displayed.

All we have displaying now is the heading, next and previous buttons, and the four dots.

Functionality

It’s time to add the functionality. Create a file named index.js and this to it.

We created a variable named currentSlidethat stores the index of the current slide to determine the current slide.

We also created a variable called slides to store each slide into a array which enables us to iterate over them and another variable named dots to store all the dots in an array.

Then we created a function named init that accepts a parameter n. The parameter will be currentSlide passed into it. Inside the function, we iterated through slides and set each slide’s display property to none. While iterating through the slides, we also iterate through dots and remove the class active from each do. When done setting each slide’s display property to none and removing the class active from each dot, we then set the display of current index according to the currentSlide, to block and add the active class to the dot of the current index using currentSlide variable.

And lastly, we add an event to the window to run the init() function when the HTML content is done loading.

The Next and Previous functionality

We add this to the index.js file.

We created a function named next to change the current slide to the next one. Here, I used the ternary operator instead of if-else statement. Inside the function, we checked if the currentSlide is greater than or equal to the last index of the slides (4 -1 = 3) which is an array. If it is true, we reset the currentSlide to 0, else we increment currentSlide variable and we run the init() function with currentSlide value.

For the prev() function, we check if the currentSlide variable is less than or or equal to zero. If it is true, we set currentSlide to last index of the slides (4 -1 = 3), else we decrement currentSlide.

And finally we add click event on next and previous button. When you click on the next button, it runs the next() function and when you click on the previous button, it runs the prev() function.

Slide show functionality

To make the slide change automatically, we set a timer that runs the next() function every 5 seconds. Add this to index.js

Dots for navigation

We also want to make the dots clickable to advance to the the next slide. Add this to index.js

Here, we iterate through the dots variable and for each dot, we add an click event and run the init() function passing the index of the dot that is clicked as the parameter and also setting currentSlide to that index.

Yes, that is all. We now have a working image slider.

This is my first ever article. Let me know what you think about it by leaving a response.

Thank you for reading.

How do you make a slider in JavaScript?