Responsive Automatic Image Slider Using HTML And CSS

When it comes to showing multiple images on the same page, an image slider is the best option. Moreover, an automatic image slider has its’ own importance as it reduces the user’s work. It helps users to interact more with the content inside the image rather than the tedious work of swapping. There are many frameworks available for this purpose like the jQuery plugin or Vanilla JavaScript. But when it comes to your specific needs, it is very hard to find the right one. So, it is best to work with the base languages HTML and CSS. You even don’t need JavaScript for the same purpose. Let’s discuss how can you create an automated responsive image slider using HTML and CSS only.

Creating Basic Structure of Image Slider

For a section with the class tag as “automatic-sliding”. Place the other child elements inside it. Just add the required images by using the figure tag under the div slide. At the end of the figure, the tag just adds a div element with class name as an indicator. Just follow the code below where I have added 5 images in the container:

HTML code:

<section class="automatic-sliding">
            <div id="slide">
                <figure>
                    <img src="images/image-1.jpg" alt="Image">
                    <img src="images/image-2.jpg" alt="Image">
                    <img src="images/image-3.png" alt="Image">
                    <img src="images/image-4.jpg" alt="Image">
                    <img src="images/image-5.jpg" alt="Image">
                </figure>
                <div class="indicator"></div>
    </div>
</section>

You can also add other extra HTML elements inside the slider section. It can take image captions or links to other pages.

Formating Basic Structure of Slider

We will now beautify the box by setting the border of the box and box-shadow. CSS will help us to do the same here. Just customize the values you want to change in the below code. Look at the code below:

CSS code:

.automatic-sliding {
	width: 95vmin;
	position: absolute;
	transform: translate(-40%,-40%);
	top:  50%;
	left: 50%;
	overflow: hidden;
	border: 10px solid #ffffff;
	border-radius: 8px;
	box-shadow: 10px 25px 30px rgba(0,0,0,0.3);

CSS Code to Create Automatic Responsive Image Slider

Just add the code below in the CSS part to make your image slider responsive. Images will change after a fixed amount of time (as chosen by you). It will be a slideshow of images that you can see on many websites. This will allow you to show more products or content to the user. Just see the code and explanation below:

CSS code:

div#slide { overflow: hidden; }
div#slide figure img { width: 20%; float: left; }
div#slide figure { 
  position: relative;
  width: 500%;
  margin: 0;
  left: 0;
  text-align: left;
  font-size: 0;
  animation: 20s sliding ease infinite; 
}

If you want to take more than 5 images, you can simply increase width i.e., 500% here. Moreover, increases the animation time. Here animation time is set to 20s. It will play each image for 4 seconds. You can also set customized animation time as per your requirements.

Now it’s time to customize the slider indicator. You can set the background color, the thickness of the bar, position, and height. Simply customize the values as per your requirement in the code below:

CSS code:

.indicator{
    width: 100%;
    max-width: 900px;
    height: 8px;
    background: #e41b17;
    position: absolute;
    bottom: 0;
    animation: indicating 5s ease infinite; 
   
}

As the final step, you need to add the CSS animations that will enable images to slide automatically. Just see the code and explanation below:

CSS code:

@keyframes sliding{
            0%{left: 0%; }
            20%{left: -100%;}
            40%{left: -200%;}
            60%{left: -300%;}
            80%{left: -400%;}
            100%{left: 0%;}
        }        

@keyframes indicating{
            from{
                left: -100%;
            }
            to{
                left: 0;
            }
}  

Here we have changed the images using @keyframes. We have used 5 images and so have divided the 100% into 5 equal parts. So, it will be divided into equal parts of 20% size. It will take 4 seconds for going from 0 to 20%. And then 4 more seconds to go from 20 to 40% and so on.

In the first part i.e., 0% we have initiated with 0% indicates no change. The second part consists of -100% as the whole image length is 100%. So, here the first image will change and the second image will be displayed. Similarly for the third image -200% and so on. If you wish to add more images then don’t forget to change percentages and update the values of sliding keyframes.

Conclusion

By applying the code above, you can easily create a responsive image slider using HTML. It will be very useful in all modern web development techniques. As it is a method that will be as useful as it is now in the future. And when you are getting to implement the same application without the help of any library, then just go for it.

Are you facing any problems after using the code above? Tell us in the comments below!!