Build a basic image slider with HTML and CSS

Hey, I am Ajink, and today in this blog, we’re going to build a basic image slider using HTML and CSS.

HTML Code: (image slider with HTML )

create index.html file make sure you have 3 images ready or download them from google or use local images

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <title>Basic Image Slider</title>
</head>
<body>
  <div class="slider-container">
    <div class="slide">
      <img src="image1.jpg" alt="Slide 1">
    </div>
    <div class="slide">
      <img src="image2.jpg" alt="Slide 2">
    </div>
    <div class="slide">
      <img src="image3.jpg" alt="Slide 3">
    </div>
  </div>
  <script defer src="script.js"></script>
</body>
</html>

Please make sure you have valid image sources (replace “image1.jpg”, “image2.jpg”, etc., with your actual image file paths).

CSS Code : Create a style.css in same directory

body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  margin: 0;
  background-color: #f0f0f0;
}

.slider-container {
  position: relative;
  width: 80%;
  max-width: 600px;
  overflow: hidden;
}

.slide {
  width: 100%;
  display: none;
}

.slide img {
  width: 100%;
  height: auto;
}

Javascript : Create a script.js

document.addEventListener("DOMContentLoaded", function () {
  let currentSlide = 0;
  const slides = document.querySelectorAll(".slide");

  function showSlide(index) {
    slides.forEach((slide, i) => {
      slide.style.display = i === index ? "block" : "none";
    });
  }

  function nextSlide() {
    currentSlide = (currentSlide + 1) % slides.length;
    showSlide(currentSlide);
  }

  // Initially show the first slide
  showSlide(currentSlide);

  // Auto-advance to the next slide every 3 seconds
  setInterval(nextSlide, 3000);
});

Conclusion:

In this blog, we successfully built a basic image slider using HTML and CSS. You can customize it by adding more slides and adjusting styles. Don’t forget to subscribe to my YouTube channel at youtube.com/@ajink21 for more exciting tutorials.

Thanks for reading, and if you have any doubts, feel free to comment!

Ajink Gupta
Ajink Gupta
Articles: 38