Hello readers, today in this blog I’m going to build an Automatic Image Slider in HTML CSS. Earlier I created lots of Card with Sliding Animation but to date, I haven’t built any Image slideshow. So without further ado let’s get started.
What is an Automatic Image Slider?
An automatic image slide means changing or sliding images and displays one by one and step by set. In this automatic image, slideshow users do not need to change images manually.
As you can see from the given Image on the webpage. Actually, this is not one image there are other 3 images that are hidden. Let’s watch the following video then we will know the real demo or example of this automatic image slider or automatic image slideshow.
Demo of Automatic Image Slider in HTML CSS
Video NOT Found!
As you have seen in the video of this automatic image slider in HTML CSS. I believe now you know that we can build an automatic image slider without using JavaScript. Have you noticed, that when I hover on the image then the image’s animation stops, for this feature, I have used the CSS animation play state paused property?
To make this sliding animation I have given the image parent width 400% because I have used 4 images and in animation, I have given margin-left -100% to the parent image of the images. If I had used 5 images then I would have given the image parent width 500%.
Now I believe you can easily make this automatic image slider in HTML CSS. If you are feeling difficulty creating this image slider then scroll down to get all source code files of this automatic image slider.
You May Like This:
Automatic Image Slider [Source Code]
To copy-paste the following code of the automatic image slider, you need to create two files one is an HTML file and another is a CSS file. After creating these two files then you can copy-paste the given code of the image slideshow in your document.
How to make an automatic image slider in HTML?
Create an HTML file on your computer with the name index.html and copy-paste the following HTML code into your document.
<!DOCTYPE html>
<!-- Created by CodingLab |www.youtube.com/c/CodingLabYT-->
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<title> Automatic Image Sider in HTML CSS | CodingLab </title>
<link rel="stylesheet" href="style.css">
<!-- Boxicons CDN Link -->
<link href='https://unpkg.com/boxicons@2.0.7/css/boxicons.min.css' rel='stylesheet'>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="container">
<div class="image-box">
<div class="image">
<img class="img1" src="images/img1.jpg" alt="">
</div>
<div class="image">
<img class="img2" src="images/img2.jpg" alt="">
</div>
<div class="image">
<img class="img3" src="images/img3.jpg" alt="">
</div>
<div class="image">
<img class="img4" src="images/img4.jpg" alt="">
</div>
</div>
</div>
</body>
</html>
Create a CSS file on your computer with the name style.css and copy-paste the following CSS code into your document.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: #7D2AE8;
padding: 0 30px;
}
.container{
max-width: 800px;
width: 100%;
height: 500px;
border: 7px solid #fff;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);
overflow: hidden;
}
.image-box{
display: flex;
height: 100%;
width: 400%;
justify-content: space-between;
}
.image-box{
animation: imgBox 10s linear infinite;
}
@keyframes imgBox{
0%{
margin-left: 0;
}
100%{
margin-left: -300%;
}
}
.image-box:hover{
animation-play-state: paused;
}
.image-box .image{
width: calc(100% - 100px);
height: 100%;
}
.image-box img{
height: 100%;
width: 100%;
object-fit: cover;
}
