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
- IB Schools in Bangalore
- 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 (12)
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
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
Doesn't work with mozilla or opera or anything else but chrome
Very Nice!!!
My pictures getting half/ Help me pls
jsfiddle.net/Kayrat/2jecmdos/264/
Doneπ link: jsfiddle.net/z48yag3j/