19 October 2021 | get inspired | , , | 0 Comments

Automatic image slider using only HTML & CSS

In this article, you will learn how to create an automatic image slider using only HTML and CSS.

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.

Below I have given a live demo that will help you to know 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%);
  }
}

Source: dev.toAuthor: Shantanu Jana

Leave a Reply

Your email address will not be published.

Scroll to top