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">
  <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>
  <div class="slider-container">
    <div class="slide">
      <img src="image1.jpg" alt="Slide 1">
    <div class="slide">
      <img src="image2.jpg" alt="Slide 2">
    <div class="slide">
      <img src="image3.jpg" alt="Slide 3">
  <script defer src="script.js"></script>

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) => { = i === index ? "block" : "none";

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

  // Initially show the first slide

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


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 for more exciting tutorials.

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

Ajink Gupta
Ajink Gupta
Articles: 38