How to Create Image Slider using HTML, CSS and JavaScript


Here's a basic example of how to create a header slider using HTML, external CSS and JavaScript: 

HTML File:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" href="style.css">
  <title>Slider</title>
</head>
<body>
  <div id="headerSlider">
  <div class="slides">
    <div class="slide">
      <img src="Image1.jpg" alt="Image 1">
      <div class="slideContent">
        <h2>Slide 1</h2>
        <p>This is slide 1 description</p>
      </div>
    </div>
    <div class="slide">
      <img src="Image2.jpg" alt="Image 2">
      <div class="slideContent">
        <h2>Slide 2</h2>
        <p>This is slide 2 description</p>
      </div>
    </div>
    <div class="slide">
      <img src="Image3.jpg" alt="Image 3">
      <div class="slideContent">
        <h2>Slide 3</h2>
        <p>This is slide 3 description</p>
      </div>
    </div>
  </div>
</div>
</body>
</html>

CSS File:

#headerSlider {
  width: 100%;
  height: 300px;
  overflow: hidden;
  position: relative;
}

.slides {
  display: flex;
  width: 400%;
  height: 100%;
  position: absolute;
  animation: slider 20s linear infinite;
}

.slide {
  width: 33.33%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.slideContent {
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  padding: 20px;
  text-align: center;
}

@keyframes slider {
  0% {
    transform: translateX(0%);
  }
  16.66% {
    transform: translateX(-33.33%);
  }
  33.32% {
    transform: translateX(-66.66%);
  }
  100% {
    transform: translateX(0%);
  }
}

JavaScript File:

var index = 0;

function showSlides() {
  var i;
  var slides = document.getElementsByClassName("slide");
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }
  index++;
  if (index > slides.length) {
    index = 1;
  }
  slides[index - 1].style.display = "flex";
  setTimeout(showSlides, 2000);
}

showSlides();


Note: This is a simple example and can be extended or modified to meet specific requirements.