Responsive Automatic Image Slider in HTML CSS

Responsive Automatic Image Slider in HTML CSS

Responsive Automatic Image Slider in HTML CSS

In this article, you will learn how to create a Responsive Automatic Image Slider using HTML and CSS. In the image slider, you can arrange a large number of images in one place and show them to the user. 

Responsive Automatic Image Slider is available mainly for business websites, image sharing, personal websites, etc. Many websites have fullscreen sliders.

Earlier I shared with you many more tutorials on automatic and manual image sliders. However, most of the designs were not responsive. You need to be Responsive Automatic Image Slider when you use the image slider on the website.

Responsive Automatic Image Slider

The images here will change automatically. There is no provision to manually change the image. If you want to change the image both automatically and manually then you can see the previous designs.

Below is a preview that will help you to know how the Responsive Automatic Image Slider works.

See the Pen
Responsive Automatic Image Slider by Foolish Developer (@foolishdevweb)
on CodePen.

First I added a background color on the webpage to make the responsive automatic image slider. Then I made a box. I have added white color to the background of this box and used shadows to enhance the beauty. 

Then I added four images to it. Here you can increase or decrease the number of images according to your needs. Then in this case I have arranged to change the images automatically. I used @keyframes to make automatic changes. Images will change every 4 seconds.

Responsive Automatic Image Slider in HTML

There is nothing like sharing tutorials here. So I just gave the source code. You can copy the code and use it in your own work. To do this, first, create an HTML and CSS file. I created this slider using the simplest code. 

I first added the images using a little bit of HTML. Then I designed it using CSS and arranged it to change the image automatically. No JavaScript or JQuery is used here.

1. HTML code of Image Slider

This Responsive Automatic Image Sliderinformation has been added using the following HTML code. Very little HTML code has been used. 

First I created an area and then I added the images. Here I have added four images. You can increase the size of the image according to your needs.

<div class=”container”>
  <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>
</div>

2. CSS code of Automatic Image Slider

 Now it’s time to design the Responsive Automatic Image Slider by CSS. First I designed the web page using some amount of code. Then I designed the slider. Here the slider is used width: 70vw and max-width: 600px. I used white background and box shadow to maintain the beauty.

Then I arranged to change the images. Here we set a time of 16 seconds for all the images to change. Since we have used four images here, we can see each image for four seconds.

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body{
   background-color: #7aacff;
}
.container{
    width: 70vw;
    max-width: 600px;
    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);
}
.wrapper{
    width: 100%;
    display: flex;
    animation: slide 16s infinite;
}
img{
   width: 100%;
}
@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 using the above codes you have learned how to create this Responsive Automatic Image Slider. I used HTML and CSS to create this slider. 

Earlier I shared many more tutorials on Advanced Automatic Image Slider. Where you can change the image automatically and manually. If you like this Responsive Image Slider, you must see it.

You can download the codes directly from the button below to create this automatic image slider. If you have any problem creating this Responsive Automatic Image Slider in Html, you can let me know on Instagram.