Automatic Image Slider in HTML and CSS only

Posted on18th Jan, 2023•Updated on12th Feb, 2024

Automatic Image Slider in HTML & CSS only without JavaScript

Hello coders! Welcome to this blog.

We are talking about Automatic Image Slider, and today In this tutorial, we will learn How to make an Automatic Image Slider in HTML & CSS only. Yes! you heard it right, we will use only HTML & CSS to make this project.

Automatic Image Slider is common website UI, that you have must seen on many websites. On websites, you will generally see this in the Hero Section, Product Section, or Gallery Section. There are many images in the image slider, which it shows one by one to the User.

By the way, there are two types of sliders, one is a manual slider which has two buttons, the Next button, and the Previous button. And the second is the automatic slider which moves automatically at a fixed time interval. So we are going to make that, Automatic Image Slider using HTML and CSS only without JavaScript.

First of all, watch the preview video of this project.

Video preview of the Automatic Image Slider

How to create Automatic Image Slider using HTML and CSS only?

Here we have discussed How to create Automatic Image Slider in HTML CSS without JavaScript, step by step. Also, we have provided Automatic Image Slider source code!

Step 1 – Write HTML code

First, create an index.html file. Follow the instruction below.

In the HTML code, first, we have linked our stylesheet file in the <head> tag. Then under the body tag we have created parent <section> ,which class name is slider_container and under this parent slider_container we have created child <section> which class name is slider.

<section class=”slider_container”> - It will be the whole slider container.
<section class=”slider”> – It will be our main slider, which will wrap all the slides and slide/move right to left automatically.


html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <section class="slider_container">
      <section class="slider"></section>
    </section>
  </body>
</html>

Then we created <div> under the child section, we give a class name of the <div> slide one, which will be our slide, and in this slide, we have <img> for images content and <span> tag with class name caption from slider caption.

If you have noticed that, we have created the class name of slide <div> is slide one. Here slider is the common class and one is the unique class.

Because, we will keep this slider as multiple, then if we design a particular slider, then this class name will help us at the same time. Right now this is the first slider that’s why it has unique class one.

When we will add more slider then we will add two for second slider, three for third slider etc.

Note: <img src="..." alt=" "> in the image tag, you should not add these dots. Replace these dots with your image path or any other image link source.


html
<section class="slider_container">
  <section class="slider">
    <div class="slide one">
      <img src="...." alt="" />
      <span class="caption"> slide one </span>
    </div>
  </section>
</section>

Here we have duplicated the slider <div> 4 times, so we have created 5 sliders in the HTML code. Alright, now completed the HTML structure, now watch and copy the HTML code of Automatic Image Slider and paste it into your index.html file.

Copy HTML code


html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <section class="slider_container">
      <section class="slider">
        <div class="slide one">
          <img src="...IMAGE LINK..." alt="" />
          <span class="caption"> slide one </span>
        </div>
        <div class="slide two">
          <img src="...IMAGE LINK..." alt="" />
          <span class="caption"> slide two </span>
        </div>
        <div class="slide three">
          <img src="...IMAGE LINK..." alt="" />
          <span class="caption"> slide three </span>
        </div>
        <div class="slide four">
          <img src="...IMAGE LINK..." alt="" />
          <span class="caption"> slide four </span>
        </div>
        <div class="slide four">
          <img src="...IMAGE LINK..." alt="" />
          <span class="caption"> slide five </span>
        </div>
      </section>
    </section>
  </body>
</html>

Step 2 – Write CSS code and styling it.

After structuring the HTML code, then create a style.css file and follow the instruction below.

In the CSS code, we have styled the components and the elements. We have width, height, padding, margin, background, etc. We have used a flex-box layout container for proper alignment of the slider and all slides.

How do I make an Image Slider Autoplay?

As we know we are making Automatic Image Slider in HTML & CSS only, without JavaScript. So we should create that Autoplay slider animation using CSS.

So for that, as we discussed before, we created a <div> in HTML with the class name slider, which will move right to left automatically with the help of CSS @keyframes animation.

So animating the slider, we have created a @keyframes animation whose name is sliding. Watch the below CSS code.

Copy CSS code


css
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: sans-serif;
}
body {
  position: relative;
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgb(29, 29, 29);
}
.slider_container {
  position: relative;
  width: 60%;
  height: 40rem;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  overflow: hidden;
}
.slider {
  position: relative;
  width: 400%;
  height: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  animation: 30s cubic-bezier(1, 0.95, 0.565, 1) sliding infinite;
}
.slide {
  position: relative;
  min-width: 100%;
  height: 100%;
}
.slide img {
  width: 100%;
  height: 100%;
}
.slide .caption {
  position: absolute;
  left: 0;
  bottom: 5%;
  font-size: 5rem;
  font-weight: 600;
  color: white;
  text-transform: capitalize;
  background: rgba(0, 0, 0, 0.348);
  backdrop-filter: blur(10px);
  padding: 1rem 5rem;
  border-radius: 0 2rem 2rem 0;
}
.slide.one {
  background: rgb(182, 19, 109);
}
.slide.two {
  background: rgb(255, 64, 64);
}
.slide.three {
  background: rgb(11, 173, 188);
}
.slide.four {
  background: rgb(11, 188, 14);
}
.slide.five {
  background: rgb(173, 11, 188);
}
@keyframes sliding {
  0% {
    transform: translateX(0%);
  }
  20% {
    transform: translateX(0%);
  }
  25% {
    transform: translateX(-100%);
  }
  45% {
    transform: translateX(-100%);
  }
  50% {
    transform: translateX(-200%);
  }
  70% {
    transform: translateX(-200%);
  }
  75% {
    transform: translateX(-300%);
  }
  95% {
    transform: translateX(-300%);
  }
  100% {
    transform: translateX(-400%);
  }
}

In this @keyframes animation, as you can see here, we have used CSS transform: translateX(). All the values in minus(-), because we will move them, from right to left.

Live preview of Automatic Image Slider in HTML & CSS only

Alright! We have Automatic Image Slider in HTML CSS CodePen live preview link here. CodePen Demo

Conclusion

This is all about Automatic Image Slider in HTML & CSS only. I hope you liked this project and enjoy it and learned something new. You can use it for your projects, also you can add it to your portfolio. If you have any queries related to this Project, let me know in the comments and contact me.