Automatic Image Slider using only HTML & CSS
Tags: html, css, beginners, webdev
Published: 2021-09-13 16:07:39

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](https://dev.to/shantanu_jana/100-javascript-projects-with-source-code-59lo)

✅ **Watch Live Preview** 👉👉  [Automatic Image Slider](https://www.foolishdeveloper.com/2021/09/automatic-image-slider.html) 

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.
```css
*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body{
    background-color: #7aacff;
}
```

 ![Design the web page](https://1.bp.blogspot.com/-s3SLZDb34s0/YTzzbLushtI/AAAAAAAABh8/Z88qme59E0kRL0MRCnURjNrp65-EQxUngCLcBGAsYHQ/s16000/Screenshot%2B%2528554%2529%2B%25281%2529.jpg)
### 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.

```html
 <div class="container">
 
 </div>
```
```css
.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);
}
```
 ![Create the basic structure of the slider](https://1.bp.blogspot.com/-vWrBu5AC50A/YTz_iYjMwWI/AAAAAAAABiE/KFM4FMUDDq4OrQhS6jGJ-2uDftQ-5r_nQCLcBGAsYHQ/s16000/Screenshot%2B%2528554%2529.jpg)
 
### Step 3: Add images to the automatic image slider 
I have added the required images in the [image slider](https://www.foolishdeveloper.com/2021/09/automatic-image-slider.html) using the following codes. Here I have used only four images. You can use many more images if you want.

```html
 <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.

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

img{
    width: 100%;
}

```
 ![Add images to the automatic image slider ](https://1.bp.blogspot.com/-JA3bAe9rX9U/YTz_pNDIHnI/AAAAAAAABiI/242poZGtuAAlogW81DeABiy6jXJwKd9JACLcBGAsYHQ/s16000/Screenshot%2B%2528554%2529%2B%25282%2529.jpg)
### Step 4: Enable autoplay with CSS

Above we have created the complete [image slider using html css](https://www.foolishdeveloper.com/2021/10/how-to-create-image-slider-in-html.html). 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](https://www.foolishdeveloper.com/2021/07/automatic-image-slider.html).

```css
@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%);
    }
}
```
 ![Enable autoplay with CSS](https://1.bp.blogspot.com/-Dzppu3Mhibw/YTz_w-3v4WI/AAAAAAAABiM/pm5nmgy8LNk6HCtRZEVkCj2Yc9LdnKL2wCLcBGAsYHQ/s16000/Screenshot%2B%2528554%2529%2B%25283%2529.jpg)

**Related Post:**
1. [Automatic Multiple Image Slider in HTML CSS](https://groundtutorial.com/automatic-multiple-image-slider-in-html-css/) 


Hope you learned from this tutorial how I created an [automatic image slider in HTML CSS](https://www.foolishdeveloper.com/2021/07/automatic-image-slider.html) 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/