In this article, you will learn how to create an automatic image slider using only HTML and CSS. Earlier I shared with you many more types of manual and automatic image sliders.
First I designed the webpage then I made a box there. This box is the structure of this slider to which I have added the required images.
✅ Watch Live Preview 👉👉 Automatic Image Slider
I used a border of 10px
which further enhanced its beauty. The images used here change every second. However, you can change the amount of time you need.
I have given a complete step-by-step explanation of each code line in the following tutorial.
Step 1: Design the web page
I designed the webpage using a small amount of CSS code below. I have only changed the background color of the webpage here.
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
background-color: #7aacff;
}
Step 2: Create the basic structure of the slider
Now I have created a box on that page using HTML and CSS code. I will store all the images in this box. I have used the width of this box 85vh. A 10 px border has been used around this box which has further enhanced its beauty.
At the end of it all, I used box-shadow. If you watch the demo you will understand that there is a black shadow around this slider. I used box-shadow to make it.
<div class="container">
</div>
.container{
width: 85vmin;
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);
}
Step 3: Add images to the automatic image slider
I have added the required images in the image slider using the following codes. Here I have used only four images. You can use many more images if you want.
<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>
I have placed these images neatly in the slider using the CSS code below. Here I have added animations. I used the animation for 16 seconds
which means it will take a total of 16 seconds to change these four images.
This means that each image will continue to change every 4 seconds. Although you want the images to change more quickly or slowly, you can change the value.
.wrapper{
width: 100%;
display: flex;
animation: slide 16s infinite;
}
img{
width: 100%;
}
Step 4: Enable autoplay with CSS
Above we have created the complete image slider using html css. Now I have added autoplay in it which means I have used the following CSS codes to change the image automatically.
I have changed the images using @keyframes
. I have changed each image along the x-axis using transform. I have already determined 100% of the total width of the slider which will take 16 s to cross.
Since I have used four images here, I have divided the total distance (100%) by four. As such, it will take 4 seconds to go from 0 to 25 percent. It will take another 4 seconds from 25 to 50.
As such, from 0 to 25 here I have set the value of translateX to 0. That means there will be no change, we will see the first image. Then from 25 to 50, I used the value of translateX -100% which means I will change the image first and see the second image. Because the length of each image is 100%.
Similarly from 50 to 75, I have used -200% which means I will see the third image after leaving the second image. Similarly, I have used the translateX value -300%
for 75 to 100 which means we will see the fourth image instead of the third image. I set a time of 16 seconds to change this whole automatic image slider.
@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%);
}
}
Related Post:
- Responsive Footer HTML CSS
- International Schools in Hyderabad
- Simple Stopwatch using JavaScript
- JavaScript Password Generator
- IB Schools in Hyderabad
- Sidebar Menu Using HTML CSS
Hope you learned from this tutorial how I created an automatic image slider in HTML CSS code. If you want to navigate with this image slider you can watch another tutorial made by me.😊
You can visit my blog for more tutorials like this.
https://www.foolishdeveloper.com/
Top comments (13)
Hi, @shantanu_jana ! I followed it down to a T, copied and pasted as I went through the steps, even downloaded the code and pasted the whole thing, but it keeps getting me the same result -- the images are all stacked up beside each other on the first slide, and the succeeding slides blank. Help!
Update:
Pasting the whole downloaded code onto Visual Studio Code, it works. But not on codepen.io.
codepen.io/fghty/pen/VwWPRwX
Same with me
Awesome
Doesn't work with mozilla or opera or anything else but chrome
Very Nice!!!
is there a way to change the size of the slideshow?
It's very simple,
.container{
width: 85vmin; / * Add your preferred size here * /
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);
}
how about enlarging the images inside of the slideshow
Why, when adding more than 4 images, does the slider not show the allowed 5th and 6th images, but immediately resets itself to the first image?
My pictures getting half/ Help me pls
jsfiddle.net/Kayrat/2jecmdos/264/
Done👍 link: jsfiddle.net/z48yag3j/