Code Media

Simple Automatic Image Slider in HTML CSS

Automatic Image Slider in HTML CSS

If you want to create automatic image sliders using only HTML and CSS then you are at the right place.

This article will help you to know how to create CSS automatic image sliders. Earlier I shared tutorials on different types of the automatic slideshow. But among them, I used JavaScript or JQuery. It is made exclusively for beginners using pure CSS.

Images cannot be changed manually here. Images change automatically from time to time. This type of image slider you can use in the background of a webpage. Where the image will change automatically at certain intervals. If you want to manually change the image you can see another design made by me.

I haven’t used anything to create this auto slideshow. Using CSS’s @keyframes, images can be changed at regular intervals. Although this time you can change it as you like.

See the Pen
by Shantanu Jana (@shantanu-jana)
on CodePen.

Image slider is a common web element that we see in almost every website case. This type of automatic image slider HTML CSS can be found in different places.

First I created a box at the top of the web page. You can see the images in this box. A shadow border has been used around this box. Here I have used five images. You can add your own image here.

How to Create Automatic Image Slider in HTML CSS

Now you might be wondering how this was made. No worries because here I have shared the complete step-by-step tutorial. If you want to make this automatic image slider, you must have some basic ideas about HTML and CSS.

Here I have given all the necessary source code and a step-by-step explanation. If you only want the source code, you can use the download button below the article.

Basic Area of Automatic Image Slider

I have created a basic structure of this image slider using the following codes. Images can be found in this area. 

The width: 200px and height: 100px of this box have been used. A solid white border has been used around the box.

<div class=”container”>
 <div id=”slider”>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  background: #0293cc;
.container {
width: 100%;
text-align: center;
#slider {
margin: 50px auto;
display: block;
overflow: hidden;
width: 200px;
border: 5px solid white;
height: 100px; 
Basic Area of Automatic Image Slider

Add image to Automatic Slider

Now is the time to add images to that basic structure. Here are five images you can use as you need.

  <div class=”image”><img src=”″ alt=”Slider 1″></div>
  <div class=”image”><img src=”″ alt=”Slider 2″></div>
  <div class=”image”><img src=”″ alt=”Slider 3″></div>
  <div class=”image”><img src=”″ alt=”Slider 4″></div>
  <div class=”image”><img src=”″ alt=”Slider 1″></div>

Here all the images have been added to the ‘figure’. This ‘figure’ is the basic area of ​​the images.

Since the width of each image is 100% and 5 images are used here, the width of the ‘figure’ is 500%.
Also used here is ‘animation: 20s slider’. This means that each image can be seen again after 20 seconds. Since 5 images have been used here. So we can see each image for 4 seconds.
#slider figure {
  position: relative;
  width: 500%;
  margin: 0;
  left: 0;
  animation: 20s slider infinite;
#slider figure .image {
width: 20%;
float: left;
img {
width: 100%;
height: auto;
Add image to Automatic Slider

Activate automatic image change

Now this automatic image slider has been activated using @keyframes. The width of the total slider is 100%, and since 5 images are used here, the width of each image is 20%. With this, the total time of the slider is 20 seconds.

Here that condition has been activated using keyframes. For 20% of the slider’s total time, we can see each image.

@keyframes slider {
  0% { left: 0; }
  20% { left: 0; }
  25% { left: -100%; }
  45% { left: -100%; }
  50% { left: -200%; }
  70% { left: -200%; }
  75% { left: -300%; }
  95% { left: -300%; }
  100% { left: -400%; }
Automatic Image Slider

Make Automatic Image Slider Responsive

Now this automatic image slider has been made responsive so that any device user can use it very easily. Using @media, different codes have been used for different sized devices.

@media screen and (min-width: 400px) {
#slider {
  width: 400px;
  height: 200px;
@media screen and (min-width: 600px) {
#slider {
  width: 600px;
  height: 300px;
Make Automatic Image Slider Responsive

Hopefully, you have learned how I created this Responsive  Automatic Image Slider using the code above.

If you want to create a more advanced type image, you can see the design. However, this CSS image slider is enough for beginners.

If you have difficulty copying and assembling the code above, use the button below. Be sure to comment on how you like this automatic image slider.

Leave a comment