How to Create an Image Slider using HTML CSS and JavaScript

In this article you will learn how to create image sliders using html and css. Earlier I have shared with you the design of many types of automatic and manual image sliders.

This is a beautiful css image slider design with four images and two navigation buttons to change the images. I took the help of JavaScript to make the navigation button work.

Watch its live demo to learn how it works. First I created a box on the webpage. Then I added four images here and used two buttons on each side. Below the images are four indicators or dots to help change the image and indicate the number of open images.

Here I have used HTML CSS and JavaScript. HTML css helped to design it and add images as needed. Implemented image change using JavaScript.

Step 1: Create the basic structure of the image slider

I created a box using the HTML and CSS code below. In this box I have added the images and the button to change the image. html image slider width: 500px and height: 350px.

<div class="container">

</div>

*,
*:before,
*:after{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body{
    height: 100vh;
    background: #0690e6;
}

.container{
    background-color: #ffffff;
    width: 500px;
    height: 350px;
    position: absolute;
    transform: translate(-50%,-50%);
    left: 50%;
    top: 50%;
    border-radius: 5px;
    padding: 20px;
    box-shadow: 0 15px 30px rgba(0,0,0,0.3);
}

Step 2: Add images to the image slider

Now I have added the images in the box. Here I have used four images. I added an active tag to activate the first image. Image width: 460px and height: 280px are used.

Here display: none is used which will completely hide the images. Then I added display: block which will help to see the images again.

I used 'active' in the case of first images so in this case the first image is seen.

<div class="image-container">
    <img src="img1.jpg" id="content1" class="active">
    <img src="img2.jpg" id="content2">
    <img src="img3.jpg" id="content3">
    <img src="img4.jpg" id="content4">
</div>

.image-container{
    position: relative;
}

img{
    position: relative;
    width: 460px;
    height: 280px;
    display: none;
}

.active{
    display: block;
}

Step 3: Create indicators for images

Now I have created four dots for four images. If you use more images then you have to increase the amount of dots here. I took the help of buttons to make these. The width of each dot 50px, height: 15px and here the background-color is completely transparent.

<div class="dot-container">
   <button onclick = "dot(1)"></button>
   <button onclick = "dot(2)"></button>
   <button onclick = "dot(3)"></button>
   <button onclick = "dot(4)"></button>
</div>

.dot-container{
    width: 250px;
    margin: 20px auto 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-around;
}

button{
    outline: none;
    cursor: pointer;
}

.dot-container button{
    height: 15px;
    width: 50px;
    border-radius: 10%;
    border: 3px solid #076bb8;
    background-color: transparent;
}

.dot-container button:nth-child(1){
    background-color: #076bb8;
}

Step 4: Create two buttons to change the image

Now I have created two buttons to change the image. The width and height of the two buttons are 40px and its position: absolutehas been used. position: absolute will help to place these buttons in a certain place.

<button id="prev" onclick="prev()"> &lt; </button>
<button id="next" onclick="next()"> &gt; </button>

#prev,#next{
    height: 40px;
    width: 40px;
    position: absolute;
    background-color: #076bb8;
    color: #ffffff;
    margin: auto;
    top: 0;
    bottom: 0;
    border: none;
    border-radius: 3px;
    font-size: 18px;
    font-weight: bolder;
}

#prev{
    left: 5px;
}

#next{
    right: 5px;
}

Step 6: Activate the image slider using JavaScript

Now is the time to implement image changes using JavaScript. Now I have determined the constant of the dot and images.

const dots = document.querySelectorAll(".dot-container button");
const images = document.querySelectorAll(".image-container img");

let i = 0; // current slide
let j = 4; // total slides

Now using JavaScript I have executed the Next button. Which will help to see the next image. Here I have implemented it using some basic calculations. If you know JavaScript you can easily understand.

function next(){
    document.getElementById("content" + (i+1)).classList.remove("active");
    i = ( j + i + 1) % j;
    document.getElementById("content" + (i+1)).classList.add("active");
    indicator( i+ 1 );
}

Now the Previs button has been activated. When you click on the Preview button, you can see the Preview image.

function prev(){
    document.getElementById("content" + (i+1)).classList.remove("active");
    i = (j + i - 1) % j;
    document.getElementById("content" + (i+1)).classList.add("active");
    indicator(i+1);
}

Now I have activated the indicator. Indicators help to understand which image is open. The indicators will continue to change when you change the image with the help of the buttons.

function indicator(num){
    dots.forEach(function(dot){
        dot.style.backgroundColor = "transparent";
    });
    document.querySelector(".dot-container button:nth-child(" + num + ")").style.backgroundColor = "#076bb8";
}

Now I have instructed the indicator to change the image. In this html css image slider you can change the image with the help of indicator.

function dot(index){
    images.forEach(function(image){
        image.classList.remove("active");
    });
    document.getElementById("content" + index).classList.add("active");
    i = index - 1;
    indicator(index);
}

This is a beautiful and simple image slider design that I created with the help of HTML CSS and JavaScript. If you have any difficulty in creating this design(How to Create Image Slider in HTML), you can definitely let me know in the comments. Like it if you like this tutorial.

Related Post:

1. Responsive Footer HTML CSS
2. International Schools in Bangalore
3. Simple Stopwatch using JavaScript
4. Preschools in Whitefield
5. JavaScript Password Generator
6. Best International Schools in Hyderabad
7. Sidebar Menu Using HTML CSS

You can visit my blog for more tutorials like this. 😊
https://www.foolishdeveloper.com/

Comments

[RodasaL]

Hello, i have a problem after giving my first img the class= "active" and the id="content" i used css to gave the images display none what makes sense that will provide all the other images with display none and the first img whith display block.
!! But what about my images from the rest of my work (not part of sliders) they will get display none aswell !!
Help pls.

[devLooney]

Hello RodasaL, I had the same problem and found a way around it.
Refer to:
.container img {...}
to select only images inside the container div.

then you won't be able the change the display property to block using just .active as a selectior(I think it's duo to specificity), instead use:

.container .active {...}

This solved the problem for me. Hope it helps.

[Shantanu Jana]

This link will help you:

foolishdeveloper.com/2021/10/how-t...

[Pablo Marcano]

Awesome 🎉💯

[Shantanu Jana]

Thank You

[Obaino82]

Well done

[Kaito]

Very cool! Thank you ✨

[Shantanu Jana]

Welcome 😊