Home Tutorials How to Make an Automatic Image Slider in HTML CSS

How to Make an Automatic Image Slider in HTML CSS

0
Automatic Image Slider

Hello readers! Today in this blog, you will learn Automatic Image Slider in HTML CSS. I previously shared a blog on Creating an HTML CSS animated sidebar navigation menu, and now it’s time to create an Automatic Image Sider.

What is an Automatic Image Slider?

Automatic image slide means the 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.

You might like this:

How to make an automatic image slider in HTML?

To create a sidebar menu follow these steps;

To create this program: ( Automatic Image Slider ). Initially you need to create two files one HTML (.html) and another CSS file (.css). After creating these files, paste the following codes into your VS IDE code sample create an HTML file called index.html and paste the indicated codes into your HTML file (.html) Remember, you must create a file with the extension. HTML.

<!DOCTYPE html>
<!-- CodeWithNepal | codewithnepal.com -->
<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8">
    <title> Automatic Image Sider in HTML CSS | CodeWithNepal </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>
  </div>
</body>
</html>

And, create a CSS file named style.css and paste the indicated codes into your CSS file. Remember, you must create a .css file.CSS

*{
  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;
}

The output of an automatic image slider.

Automatic Image Slider

NO COMMENTS

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Exit mobile version