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
Untitled 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.
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.
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.
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.
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.
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.