Automatic Image Slider in HTML CSS Without JavaScript

This code creates an automatic image slider in HTML and CSS without JavaScript. It cycles through images smoothly. It helps showcase multiple images in a slider format without the need for JavaScript.

You can use this code on your website’s homepage to display featured images. It enhances user engagement by showcasing content dynamically. Additionally, it reduces page load time and dependencies by avoiding JavaScript.

How to Create Automatic Image Slider in HTML CSS without Javascript

1. First, create a new HTML file and name it whatever you like. Inside the file, set up the basic structure of your webpage. Then, within the body tags, create a section for your slider.

Inside the slider container, add individual slide elements for each image you want to include. Make sure to include appropriate classes for styling.

<section class="slider_container">
    <section class="slider">
      <div class="slide one">
        <img src="https://cdn.pixabay.com/photo/2022/10/20/11/26/landscape-7534634__340.jpg" alt="">

        <span class="caption">
          slide one
        </span>
      </div>
      <div class="slide two">
        <img src="https://cdn.pixabay.com/photo/2022/09/27/05/10/cape-leadwort-7482043__340.jpg" alt="">
        <span class="caption">
          slide two
        </span>
      </div>
      <div class="slide three">
        <img src="https://cdn.pixabay.com/photo/2018/01/14/23/12/nature-3082832__340.jpg" alt="">
        <span class="caption">
          slide three
        </span>
      </div>
      <div class="slide four">
        <img src="https://cdn.pixabay.com/photo/2023/01/06/13/33/city-7701251_960_720.jpg" alt="">
        <span class="caption">
          slide four
        </span>
      </div>
      <div class="slide four">
        <img src="https://cdn.pixabay.com/photo/2023/01/10/00/30/swan-7708580__340.jpg" alt="">
        <span class="caption">
          slide five
        </span>
      </div>
    </section>
  </section>

2. Now, it’s time to style your slider to achieve the desired look and behavior. Copy the provided CSS code into a file named styles.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%;
  min-width: 50rem;
  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%);
  }
}

Feel free to customize the slider further by adjusting CSS properties such as colors, fonts, and animations to match your website’s design.

That’s all! hopefully, you have successfully created an Automatic Image Slider In HTML CSS on your website. If you have any questions or suggestions, feel free to comment below.