This content originally appeared on DEV Community and was authored by Shantanu Jana
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.
You can watch the live demo to see how it works. 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. 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 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%);
}
}
Hope you learned from this tutorial how I created an automatic image slider using only HTML and 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/
This content originally appeared on DEV Community and was authored by Shantanu Jana
Shantanu Jana | Sciencx (2021-09-13T16:07:39+00:00) Automatic Image Slider using only HTML & CSS. Retrieved from https://www.scien.cx/2021/09/13/automatic-image-slider-using-only-html-css/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.