DEV Community

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

Posted on • Updated 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.

โœ… 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;
}
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 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%);
    }
}
Enter fullscreen mode Exit fullscreen mode

Enable autoplay with CSS

Related Post:

  1. Automatic Multiple Image Slider in HTML CSS

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 (12)

Collapse
 
gmvelasco profile image
GMVelasco

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!

Collapse
 
gmvelasco profile image
GMVelasco

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

Collapse
 
shantanu_jana profile image
Shantanu Jana
Collapse
 
avwerosuotrust profile image
avwerosuotrust

Same with me

Collapse
 
dynamichacker786 profile image
Dynamichacker786

Awesome

Collapse
 
tensh1mp_ profile image
tai ron

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

Collapse
 
shantanu_jana profile image
Shantanu Jana

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

Collapse
 
tensh1mp_ profile image
tai ron

how about enlarging the images inside of the slideshow

Collapse
 
tonttutolvanteri profile image
TonttuTolvanteri

Doesn't work with mozilla or opera or anything else but chrome

Collapse
 
brunobarross profile image
Altamiro Bruno

Very Nice!!!

Collapse
 
narrowlook profile image
Kayrat MedeshoV

My pictures getting half/ Help me pls
jsfiddle.net/Kayrat/2jecmdos/264/

Collapse
 
shantanu_jana profile image
Shantanu Jana • Edited

Done๐Ÿ‘ link: jsfiddle.net/z48yag3j/