How to create image slider using HTML CSS and JavaScript

Published on May 30, 2024

Hello everyone, and welcome to our YouTube tutorial on creating a simple image slider using HTML, CSS, and JavaScript. In this video, we’ll guide you through each step to build your very own image slider for your web projects.

Let’s start by understanding the HTML structure of our image slider. Here, we have a basic HTML document starting with the <!DOCTYPE html> declaration, followed by the opening <html> tag.

Within the <head> section, we have the title of our webpage set to “Image Slider” and a link to an external CSS file called “style.css” to style our slider.

In the <body> section, we have a container <div> that wraps around our image slider and navigation buttons.

Inside this container, we have another <div> with a class of “image-container” which holds our images. Each image is represented by an <img> tag with a unique ID and the class “active” for the first image.

Additionally, we have a separate <div> for our navigation dots and buttons for navigating between images.

Finally, at the bottom of our HTML file, we have a reference to an external JavaScript file called “script.js” where we’ll implement the functionality for our image slider.

CSS

First, we have a universal selector (*) along with its pseudo-elements :before and :after. We’re resetting padding and margin to 0 and setting box-sizing to border-box, ensuring consistent sizing for our elements.

Next, we target the body element. We’re setting its height to 100vh to occupy the full viewport height, giving a pleasant viewing experience. The background colour is set to a dark shade of grey (#2a2a2a), and we’re using the Arial font family for text.

Moving on to the .container class, which wraps around our image slider. We’re giving it a white background, a width of 60% (with a minimum width of 420 pixels), and positioning it absolutely in the centre of the viewport using the transform property along with left and top. It also has a subtle border-radius and box-shadow for a sleek look.

Now, let’s focus on the .image-container class. This is where our images reside. It’s set to relative positioning to contain its absolutely positioned children. Each image (img tag) is set to 100% width and hidden by default (display: none) except for the one with the class active.

The .dot-container class holds our navigation dots. It’s a flex container with evenly spaced buttons representing each image. The active dot is styled differently with a background colour matching the background of the slider.

Lastly, we have styling for the navigation buttons (#prev and #next). Positioned absolutely on the sides of the slider, they have a circular shape, dark background colour, and white text for contrast.

JAVASCRIPT

First, we initialise two variables i and j to keep track of the current image index and the total number of images, respectively.

Next, we select all the dot buttons and image elements on our webpage using document.querySelectorAll().

Now, let’s dive into the next() function. When the next button is clicked, it removes the “active” class from the current image, calculates the next image index using modulo arithmetic to ensure looping, and adds the “active” class to the next image. It then updates the indicator dot to reflect the current image.

Similarly, the prev() function works in a similar manner but decrements the image index instead of incrementing it.

The indicator() function updates the indicator dots to reflect the current image. It removes the background colour from all dots and adds it to the dot corresponding to the current image index.

Lastly, the dot() function is called when a dot button is clicked. It removes the “active” class from all images, adds it to the image corresponding to the clicked dot, updates the current image index, and updates the indicator dots accordingly.

And there you have it! With this JavaScript code, our image slider becomes fully functional. In the final part of our tutorial, we’ll bring everything together and see our image slider in action!

Our Latest Blog

Java Spring Boot

Java Spring Boot: A Comprehensive Introduction to Microservices

Introduction to Java Spring Boot and Microservices Java Spring Boot has emerged as an important...
Read More
Fundamentals of Scala Programming

Mastering the Fundamentals of Scala Programming: A Complete Guide to Functional Programming

Introduction to Scala Programming Scala programming has gained immense popularity in recent years thanks to...
Read More
Java Programming

Java Basics for Beginners: A Step-by-Step Guide to Mastering Java Programming

Introduction to Java programming Java, a versatile and extensively utilised programming language, is popular among...
Read More