How to Create Image Slider in HTML & CSS

In this article, you will learn how to create an image slider using HTML and CSS. The HTML image slider is an important element for a website. Different images and information are beautifully arranged using sliders.

Earlier I made different types of image sliders some of which are automatic and some are manual. There are cursors that will act as indicators and help to change the image.

 I have used HTML CSS and JavaScript to create this simple image slider. I have created images, buttons, cursors, etc. with the help of HTML. I have designed these with the help of CSS. I have implemented the image slider using JavaScript.

How to Create Image Slider in HTML

In the following tutorial, I have shown you how to create this HTML image slider. First I gave the background color of the webpage blue. Then I created a box that will contain all the information of the slider. There are two buttons to change the image.

See the Pen Untitled by Code Media (@codemediaweb) on CodePen.

Hopefully, the demo above has helped you to know how this project works. You need to have a basic idea about HTML CSS and javascript to make it.

First of all, you create an HTML and CSS file then follow the complete steps I told you. Below the article, you will find the download link.

Step 1: Basic structure of image slider

I have created the basic structure of this image slider using the following codes. First I designed the web page using some CSS code. Then I made a small box. 

The width of the box is 500 px and the height is 350 px. Here the background color of the box is white and a box shadow is used which enhances the beauty.

<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 image to HTML slider

Now I have added the image to the box. You can increase or decrease the size of this image. The width of those images: 460px and height: 280px. Here I have used display: none for images. As a result, the images can not be seen. Then using Active I used display: block. As a result, the images can be 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 an indicator in the image slider

Now I have created four dots for four images. These dots will act as indicators. It has width: 50px, height: 15px and border-radius has helped to increase it a bit round.

<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 buttons to change images

Now I have created a preview and the next button to change the images. The width and height of the button 40 px have been used. I have set the position separately for the first and second buttons.

 <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 5: Activate the image slider using JavaScript

Above we have created the complete CSS image slider. Now it's time to activate with JavaScript. Set the constant of the image slider and dot one by one.

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

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

Now, how many numbered images I have saved in 'i' and how many total images I have saved in 'j'.

let i = 0; // current slide

let j = 4; // total slides

Now I have executed the next button. The next image will appear whenever you click on the Next button.

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 I have activated the previous button. The previous image can be seen when you click the Previs button.

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. That dot will change whenever you change the images. If you look at the image first, the background color of the first dot will be blue. When you see the second image, the background color of the second dot will be blue. 

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 activated the dots for an image change. As I said before, these dots will act as indicators and help to change the image. Above we have made it effective for indicators.

function dot(index){

    images.forEach(function(image){

        image.classList.remove("active");

    });

    document.getElementById("content" + index).classList.add("active");

    i = index - 1;

    indicator(index);

}

Hope you learned from this tutorial how I created this image slider using HTML CSS and JavaScript. I have already shown many more types of manual and automatic image sliders. If you like this design, be sure to check out the other tutorials.
 
You can download the source code required to create this project (How to Create Image Slider in HTML) from the download button below.  

The download will start automatically