DEV Community

Cover image for How to Create an Image Slider using HTML CSS and JavaScript
Shantanu Jana
Shantanu Jana

Posted on • Updated on

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>
Enter fullscreen mode Exit fullscreen mode
*,
*: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);
}
Enter fullscreen mode Exit fullscreen mode

Create the basic structure of the image slider

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>
Enter fullscreen mode Exit fullscreen mode
.image-container{
    position: relative;
}

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

.active{
    display: block;
}
Enter fullscreen mode Exit fullscreen mode

Add images to the image slider

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>
Enter fullscreen mode Exit fullscreen mode
.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;
}
Enter fullscreen mode Exit fullscreen mode

Create indicators for images

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>
Enter fullscreen mode Exit fullscreen mode
#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;
}
Enter fullscreen mode Exit fullscreen mode

How to Create Image Slider in HTML

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");
Enter fullscreen mode Exit fullscreen mode
let i = 0; // current slide
let j = 4; // total slides
Enter fullscreen mode Exit fullscreen mode

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 );
}
Enter fullscreen mode Exit fullscreen mode

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);
}
Enter fullscreen mode Exit fullscreen mode

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";
}
Enter fullscreen mode Exit fullscreen mode

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);
}
Enter fullscreen mode Exit fullscreen mode

image slider using JavaScript
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. Simple Weather App using JavaScript
  2. Make a Todo List using JavaScript
  3. Simple Stopwatch using JavaScript
  4. Skeleton Screen Loading Animation
  5. Javascript Age Calculator
  6. Random Password Generator with JavaScript
  7. Automatic Image Slider in Html, CSS
  8. Sidebar Menu Using HTML CSS

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

Latest comments (8)

Collapse
 
rodasal profile image
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.

Collapse
 
devlooney profile image
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.

Collapse
 
shantanu_jana profile image
Shantanu Jana

This link will help you:

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

Collapse
 
devpjmb profile image
Pablo Marcano

Awesome 🎉💯

Collapse
 
shantanu_jana profile image
Shantanu Jana

Thank You

Collapse
 
obaino82 profile image
Obaino82

Well done

Collapse
 
merouanezouaid profile image
Kaito

Very cool! Thank you ✨

Collapse
 
shantanu_jana profile image
Shantanu Jana

Welcome 😊