DEV Community

Cover image for Automatic Image Slider using only HTML & CSS
Shantanu Jana
Shantanu Jana

Posted on

Automatic Image Slider using only HTML & CSS

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.

You can watch the live demo to see how it works. 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;
}
Enter fullscreen mode Exit fullscreen mode

Design the web page

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

Create the basic structure of the slider

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

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%;
}

Enter fullscreen mode Exit fullscreen mode

Add images to the automatic image slider

Step 4: Enable autoplay with CSS

Above we have created the complete image slider. 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 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%);
    }
}
Enter fullscreen mode Exit fullscreen mode

Enable autoplay with CSS

Hope you learned from this tutorial how I created an automatic image slider using only HTML and 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/

Discussion (2)

Collapse
dynamichacker786 profile image
Dynamichacker786

Awesome

Collapse
brunobarross profile image
Altamiro Bruno

Very Nice!!!