Create an Automatic Image Slideshow in HTML CSS

#webdev #beginners #tutorial #css

I will help you if you want to create Automatic Image Slideshow. Here I have created an Automatic Image Slider which is made by html and css only.

Yes you are right
This slider made only by html and css, its images will change automatically. However, I have already created a slider using JavaScript. However, to many users, it seemed a bit complicated. Watch its live demo to learn how it works.

So I made this design. First the slider was created by html and the images were added. Then I designed with css and arranged to change the images automatically.

Automatic Image Slideshow in HTML CSS

This Automatic Image Slider in html css has been created in such a simple way that you will be surprised to see.

First I made a simple box. Box width: 500px and a 10 px border used. The use of borders has greatly enhanced the beauty of this image slider.

HTML Code

The following code is the html code with which the structure of the slider and the images have been added. Here I have used 4 images.

<!--Basic structure of slider-->
<div class="container">
<!--Area of the images-->
   <div class="wrapper">
      <img src="https://filmswot.files.wordpress.com/2018/01/coco_dominates_chinese_box_office_.jpg">
      <img src="https://www.foundry.com/sites/default/files/inline-images/Images_003_0.jpg">
      <img src="https://www.foylefilmfestival.org/sites/default/files/COCO%20main%20image%203.jpg">
      <img src="https://imagesvc.meredithcorp.io/v3/mm/image?url=https%3A%2F%2Fstatic.onecms.io%2Fwp-content%2Fuploads%2Fsites%2F6%2F2017%2F11%2Fcoco_c330_56b_pub-pub16n-186_rgb-2000.jpg">
   </div>

</div>

CSS Code

The code below is css by which the image slider is designed and the automatic conversion of images is implemented.

Basic structure of slider is first designed by some css.
Then the images are designed. The width of the image is kept equal to the width of the slider.
Then animation is added between the images and activated by keyframes.

👉👉 A simple logic has been used to change the image here. Here the total time of animation is divided by the amount of images. At that time we will see the image.

That means at that time we will see that image. Since 4 images have been used here. So we can see each image up to 25% of the total time.

Since the total time of animation is 16 seconds, we can see each image for 4 seconds.

/*The webpage has been designed*/
*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body{
    background-color: #ffffff;
}

/*Basic structure of slider*/
.container{
    width: 500px;
    position: absolute;
    transform: translate(-50%,-50%);
    top: 50%;
    left: 50%;
    overflow: hidden;
    border: 10px solid #ffffff;
    border-radius: 8px;
    box-shadow: -1px 5px 15px black;
}

/*Area of images*/
.wrapper{
    width: 100%;
    display: flex;
    animation: slide 16s infinite;
}

img{
    width: 100%;
}
/*Animation activated by keyframes*/
@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%);
    }
}

Hopefully you have no more questions about this Automatic Image Slideshow in HTML CSS. Let me know in the comments if you have any questions.

Related Post:

I have shared tutorials on many advanced image sliders by JavaScript before. If you know JavaScript then you can see the tutorials of that automatic image slider.