Shantanu Jana

Posted on Sep 13, 2021 • Edited on Sep 13

Automatic Image Slider using only HTML & CSS

#html #css #beginners #webdev

In this article, you will learn how to create an automatic image slider using only HTML and CSS. Earlier I shared with you many more types of manual and automatic image sliders.

First I designed the webpage then I made a box there. This box is the structure of this slider to which I have added the required images.

✅ 100+ JavaScript Projects

✅ Watch Live Preview 👉👉 Automatic Image Slider

I used a border of 10px which further enhanced its beauty. The images used here change every second. However, you can change the amount of time you need.

I have given a complete step-by-step explanation of each code line in the following tutorial.

Step 1: Design the web page

I designed the webpage using a small amount of CSS code below. I have only changed the background color of the webpage here.



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

body{
    background-color: #7aacff;
}

Step 2: Create the basic structure of the slider

Now I have created a box on that page using HTML and CSS code. I will store all the images in this box. I have used the width of this box 85vh. A 10 px border has been used around this box which has further enhanced its beauty.

At the end of it all, I used box-shadow. If you watch the demo you will understand that there is a black shadow around this slider. I used box-shadow to make it.



 <div class="container">

 </div>



.container{
    width: 85vmin;
    position: absolute;
    transform: translate(-50%,-50%);
    top: 50%;
    left: 50%;
    overflow: hidden;
    border: 10px solid #ffffff;
    border-radius: 8px;
    box-shadow: 10px 25px 30px rgba(0,0,0,0.3);
}

Step 3: Add images to the automatic image slider

I have added the required images in the image slider using the following codes. Here I have used only four images. You can use many more images if you want.



 <div class="wrapper">
   <img src="https://i.pinimg.com/originals/2b/de/de/2bdede0647e3cdf75b44ea33723201d9.jpg">
   <img src="https://images6.alphacoders.com/462/thumb-1920-462371.jpg">
   <img src="https://images5.alphacoders.com/343/thumb-1920-343645.jpg">
   <img src="https://cdn.wallpapersafari.com/24/98/dwMtqD.jpg">
 </div>

I have placed these images neatly in the slider using the CSS code below. Here I have added animations. I used the animation for 16 seconds which means it will take a total of 16 seconds to change these four images.

This means that each image will continue to change every 4 seconds. Although you want the images to change more quickly or slowly, you can change the value.



.wrapper{
    width: 100%;
    display: flex;
    animation: slide 16s infinite;
}

img{
    width: 100%;
}

Step 4: Enable autoplay with CSS

Above we have created the complete image slider using html css. Now I have added autoplay in it which means I have used the following CSS codes to change the image automatically.

I have changed the images using @keyframes. I have changed each image along the x-axis using transform. I have already determined 100% of the total width of the slider which will take 16 s to cross.

Since I have used four images here, I have divided the total distance (100%) by four. As such, it will take 4 seconds to go from 0 to 25 percent. It will take another 4 seconds from 25 to 50.

As such, from 0 to 25 here I have set the value of translateX to 0. That means there will be no change, we will see the first image. Then from 25 to 50, I used the value of translateX -100% which means I will change the image first and see the second image. Because the length of each image is 100%.

Similarly from 50 to 75, I have used -200% which means I will see the third image after leaving the second image. Similarly, I have used the translateX value -300% for 75 to 100 which means we will see the fourth image instead of the third image. I set a time of 16 seconds to change this whole automatic image slider.



@keyframes slide{
    0%{
        transform: translateX(0);
    }
    25%{
        transform: translateX(0);
    }
    30%{
        transform: translateX(-100%);
    }
    50%{
        transform: translateX(-100%);
    }
    55%{
        transform: translateX(-200%);
    }
    75%{
        transform: translateX(-200%);
    }
    80%{
        transform: translateX(-300%);
    }
    100%{
        transform: translateX(-300%);
    }
}

Related Post:

Hope you learned from this tutorial how I created an automatic image slider in HTML CSS code. If you want to navigate with this image slider you can watch another tutorial made by me.😊

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

Top comments (13)

GMVelasco • Nov 15 '21

Hi, @shantanu_jana ! I followed it down to a T, copied and pasted as I went through the steps, even downloaded the code and pasted the whole thing, but it keeps getting me the same result -- the images are all stacked up beside each other on the first slide, and the succeeding slides blank. Help!

GMVelasco • Nov 15 '21

Update:
Pasting the whole downloaded code onto Visual Studio Code, it works. But not on codepen.io.

Shantanu Jana • Nov 16 '21

codepen.io/fghty/pen/VwWPRwX

avwerosuotrust • Jan 3 '23

Same with me

Dynamichacker786 • Sep 14 '21

Awesome

Altamiro Bruno • Sep 15 '21

Very Nice!!!

tai ron • May 5 '22

is there a way to change the size of the slideshow?

Shantanu Jana • May 6 '22

It's very simple,

.container{
width: 85vmin; / * Add your preferred size here * /
position: absolute;
transform: translate (-50%, - 50%);
top: 50%;
left: 50%;
overflow: hidden;
border: 10px solid #ffffff;
border-radius: 8px;
box-shadow: 10px 25px 30px rgba (0,0,0,0.3);
}