How to Create Automatic Image Slider in JavaScript: Complete HTML, CSS & JS Guide

To create an automatic image slider in JavaScript, add images inside a slider container, hide inactive slides with CSS, and use setInterval() in JavaScript to switch images automatically after a set time.

An automatic image slider is one of the most useful elements for websites, landing pages, portfolios, blogs, and product showcases. It lets you display multiple images in the same space and automatically changes the image after a set time.

The good news is that you do not need any heavy library or jQuery to create one. With simple HTML, CSS, and vanilla JavaScript, you can build a clean, responsive, and automatic image slider.

In this guide, you will learn how to create an automatic image slider in JavaScript step by step. You will also learn how to add autoplay, next and previous buttons, dots, hover pause, responsive styling, and common fixes.

What Is an Automatic Image Slider in JavaScript?

An automatic image slider in JavaScript is a slideshow that changes images automatically after a specific time interval. It usually works by showing one image at a time and hiding the others.

JavaScript controls the active image and moves to the next image using functions like setInterval().

A basic automatic image slider usually includes:

• A slider container
• Multiple images or slides
• CSS to style and hide inactive slides
• JavaScript to change slides automatically
• Optional buttons, dots, captions, and transitions

How Does an Automatic Image Slider Work?

An automatic image slider works in three simple steps:

1. First, all images are placed inside a slider container.
2. Then, CSS hides all images except the active one.
3. Finally, JavaScript changes the active image after a fixed time.

For example, if you set the interval to 3000 milliseconds, the slider will change the image every 3 seconds.

The basic logic looks like this:

setInterval(nextSlide, 3000);

This means the nextSlide() function will run every 3 seconds.

Complete Automatic Image Slider Using HTML, CSS, and JavaScript

Now let’s create a simple automatic image slider using HTML, CSS, and JavaScript.

This version includes:

• Automatic autoplay
• Smooth fade effect
• Responsive layout
• Next and previous buttons
• Pagination dots

Step 1: Create the HTML Structure

First, create the basic HTML structure for your image slider.

<div class="slider">
  <div class="slide active">
    <img src="image1.jpg" alt="Slide Image 1">
  </div>

  <div class="slide">
    <img src="image2.jpg" alt="Slide Image 2">
  </div>

  <div class="slide">
    <img src="image3.jpg" alt="Slide Image 3">
  </div>

  <button class="prev" onclick="changeSlide(-1)">&#10094;</button>
  <button class="next" onclick="changeSlide(1)">&#10095;</button>
</div>

<div class="dots">
  <span class="dot active" onclick="currentSlide(0)"></span>
  <span class="dot" onclick="currentSlide(1)"></span>
  <span class="dot" onclick="currentSlide(2)"></span>
</div>

In this structure, each image is inside a slide div. The first slide has an extra active class, so it appears first when the page loads.

Step 2: Add CSS for Slider Design

Now add CSS to style the slider and hide inactive images.

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial, sans-serif;
}

.slider {
  position: relative;
  max-width: 900px;
  height: 500px;
  margin: 40px auto;
  overflow: hidden;
  border-radius: 12px;
}

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

.slide.active {
  display: block;
  animation: fade 0.8s ease-in-out;
}

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

.prev,
.next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  padding: 14px 18px;
  cursor: pointer;
  font-size: 24px;
  border-radius: 50%;
}

.prev {
  left: 20px;
}

.next {
  right: 20px;
}

.prev:hover,
.next:hover {
  background: rgba(0, 0, 0, 0.8);
}

.dots {
  text-align: center;
  margin-top: 15px;
}

.dot {
  height: 12px;
  width: 12px;
  margin: 0 5px;
  display: inline-block;
  background-color: #bbb;
  border-radius: 50%;
  cursor: pointer;
}

.dot.active {
  background-color: #333;
}

@keyframes fade {
  from {
    opacity: 0.4;
  }

  to {
    opacity: 1;
  }
}

@media screen and (max-width: 768px) {
  .slider {
    height: 300px;
    margin: 20px;
  }

  .prev,
  .next {
    padding: 10px 14px;
    font-size: 18px;
  }
}

This CSS makes the image slider responsive and visually clean. The active class controls which image is visible.

Step 3: Add JavaScript for Automatic Sliding

Now add JavaScript to make the slider change images automatically.

let slideIndex = 0;
const slides = document.querySelectorAll(".slide");
const dots = document.querySelectorAll(".dot");

function showSlide(index) {
  slides.forEach((slide) => {
    slide.classList.remove("active");
  });

  dots.forEach((dot) => {
    dot.classList.remove("active");
  });

  if (index >= slides.length) {
    slideIndex = 0;
  }

  if (index < 0) {
    slideIndex = slides.length - 1;
  }

  slides[slideIndex].classList.add("active");
  dots[slideIndex].classList.add("active");
}

function changeSlide(step) {
  slideIndex += step;
  showSlide(slideIndex);
}

function currentSlide(index) {
  slideIndex = index;
  showSlide(slideIndex);
}

function autoSlide() {
  slideIndex++;
  showSlide(slideIndex);
}

setInterval(autoSlide, 3000);

This JavaScript code changes the image every 3 seconds. It also lets users click the next button, previous button, or dots to change slides manually.

Full Code for Automatic Image Slider

Here is the complete code in one place.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Automatic Image Slider in JavaScript</title>

  <style>
    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      font-family: Arial, sans-serif;
    }

    .slider {
      position: relative;
      max-width: 900px;
      height: 500px;
      margin: 40px auto;
      overflow: hidden;
      border-radius: 12px;
    }

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

    .slide.active {
      display: block;
      animation: fade 0.8s ease-in-out;
    }

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

    .prev,
    .next {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      background: rgba(0, 0, 0, 0.5);
      color: white;
      border: none;
      padding: 14px 18px;
      cursor: pointer;
      font-size: 24px;
      border-radius: 50%;
    }

    .prev {
      left: 20px;
    }

    .next {
      right: 20px;
    }

    .prev:hover,
    .next:hover {
      background: rgba(0, 0, 0, 0.8);
    }

    .dots {
      text-align: center;
      margin-top: 15px;
    }

    .dot {
      height: 12px;
      width: 12px;
      margin: 0 5px;
      display: inline-block;
      background-color: #bbb;
      border-radius: 50%;
      cursor: pointer;
    }

    .dot.active {
      background-color: #333;
    }

    @keyframes fade {
      from {
        opacity: 0.4;
      }

      to {
        opacity: 1;
      }
    }

    @media screen and (max-width: 768px) {
      .slider {
        height: 300px;
        margin: 20px;
      }

      .prev,
      .next {
        padding: 10px 14px;
        font-size: 18px;
      }
    }
  </style>
</head>

<body>

  <div class="slider">
    <div class="slide active">
      <img src="image1.jpg" alt="Slide Image 1">
    </div>

    <div class="slide">
      <img src="image2.jpg" alt="Slide Image 2">
    </div>

    <div class="slide">
      <img src="image3.jpg" alt="Slide Image 3">
    </div>

    <button class="prev" onclick="changeSlide(-1)">&#10094;</button>
    <button class="next" onclick="changeSlide(1)">&#10095;</button>
  </div>

  <div class="dots">
    <span class="dot active" onclick="currentSlide(0)"></span>
    <span class="dot" onclick="currentSlide(1)"></span>
    <span class="dot" onclick="currentSlide(2)"></span>
  </div>

  <script>
    let slideIndex = 0;
    const slides = document.querySelectorAll(".slide");
    const dots = document.querySelectorAll(".dot");

    function showSlide(index) {
      slides.forEach((slide) => {
        slide.classList.remove("active");
      });

      dots.forEach((dot) => {
        dot.classList.remove("active");
      });

      if (index >= slides.length) {
        slideIndex = 0;
      }

      if (index < 0) {
        slideIndex = slides.length - 1;
      }

      slides[slideIndex].classList.add("active");
      dots[slideIndex].classList.add("active");
    }

    function changeSlide(step) {
      slideIndex += step;
      showSlide(slideIndex);
    }

    function currentSlide(index) {
      slideIndex = index;
      showSlide(slideIndex);
    }

    function autoSlide() {
      slideIndex++;
      showSlide(slideIndex);
    }

    setInterval(autoSlide, 3000);
  </script>

</body>
</html>

How to Change Slider Speed

You can change the autoplay speed by editing the setInterval() value.

setInterval(autoSlide, 3000);

Here, 3000 means 3000 milliseconds, or 3 seconds.

For example:

setInterval(autoSlide, 5000);

This will change the image every 5 seconds.

How to Pause Automatic Slider on Hover

Sometimes users want to stop the slider while hovering over it. This improves user experience because visitors can look at the image without it changing too quickly.

Use this JavaScript:

let slideInterval = setInterval(autoSlide, 3000);
const slider = document.querySelector(".slider");

slider.addEventListener("mouseenter", () => {
  clearInterval(slideInterval);
});

slider.addEventListener("mouseleave", () => {
  slideInterval = setInterval(autoSlide, 3000);
});

This pauses the slider when the mouse enters the slider area and starts it again when the mouse leaves.

How to Make the Image Slider Responsive

To make your image slider responsive, use percentage-based widths and media queries.

Example:

.slider {
  width: 100%;
  max-width: 900px;
  height: 500px;
}

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

@media screen and (max-width: 768px) {
  .slider {
    height: 300px;
  }
}

The object-fit: cover; property keeps the image properly fitted inside the slider without stretching it.

How to Add Captions to the Image Slider

You can add captions inside each slide like this:

<div class="slide active">
  <img src="image1.jpg" alt="Slide Image 1">
  <div class="caption">Beautiful Nature View</div>
</div>

Then add this CSS:

.caption {
  position: absolute;
  bottom: 30px;
  left: 30px;
  color: white;
  background: rgba(0, 0, 0, 0.5);
  padding: 10px 16px;
  border-radius: 6px;
  font-size: 18px;
}

Captions are useful for banners, portfolios, product showcases, and travel websites.

JavaScript Image Slider with Autoplay: Why Use Vanilla JS?

A vanilla JavaScript image slider is lightweight and does not require any external library. That means your website can load faster and stay easier to maintain.

You should use vanilla JavaScript when:

• You want simple autoplay functionality
• You do not want to use jQuery
• You need full control over the slider
• You want a lightweight slider
• You are learning JavaScript basics

For small websites, blogs, portfolios, and simple landing pages, a vanilla JavaScript slider is usually enough.

JavaScript Slider vs CSS-Only SliderFAQs

You can create sliders using both JavaScript and CSS. However, each method has different benefits.

Slider Type	Best For	Limitations
JavaScript Slider	Autoplay, buttons, dots, pause on hover, custom controls	Requires basic JavaScript knowledge
CSS-Only Slider	Simple animation and lightweight effects	Limited control and harder to customize
Plugin Slider	WordPress users and non-coders	Depends on plugin features

If you need more control, JavaScript is the better choice. If you want a very simple animation, CSS may be enough.

Common Problems and Fixes

Images Are Showing All at Once

This usually happens when the inactive slides are not hidden.

Make sure you have this CSS:

.slide {
  display: none;
}

.slide.active {
  display: block;
}

Slider Is Not Changing Automatically

Check whether your JavaScript file is properly connected. Also make sure setInterval() is added correctly.

setInterval(autoSlide, 3000);

First Image Is Not Showing

Make sure the first slide has the active class.

<div class="slide active">
  <img src="image1.jpg" alt="Slide Image 1">
</div>

Next and Previous Buttons Are Not Working

Check whether the button function names match your JavaScript function names.

Example:

<button onclick="changeSlide(-1)">Previous</button>
<button onclick="changeSlide(1)">Next</button>

Dots Are Not Updating

Make sure the number of dots matches the number of slides. If you have 4 images, you need 4 dots.

Slider Is Not Responsive

Use width: 100%;, max-width, and media queries. Also use object-fit: cover; for images.

Best Practices for Creating an Automatic Image Slider

To make your JavaScript image slider better, follow these best practices:

• Compress images before uploading
• Use descriptive image alt text
• Keep slider height consistent
• Do not change slides too quickly
• Add manual controls for better user experience
• Make it responsive for mobile users
• Use lazy loading for better performance
• Avoid adding too many large images

A slider should improve your website design, not slow it down.

How to Add an Automatic Image Slider in WordPress Without Coding

If you are using WordPress, writing custom HTML, CSS, and JavaScript may not always be the best option. Beginners often prefer using a slider plugin because it saves time and reduces coding errors.

With a WordPress slider plugin, you can usually:

• Upload images from the media library
• Enable autoplay
• Set slider speed
• Add navigation arrows
• Add dots or pagination
• Create responsive sliders
• Insert the slider using shortcode or block editor

This is helpful for users who want to add sliders to blog posts, pages, WooCommerce products, portfolios, or homepage banners without editing code manually.

When Should You Use a Custom JavaScript Slider?

You should use a custom JavaScript slider when you want full control over the design and functionality.

It is a good choice for:

• Custom landing pages
• Static HTML websites
• Portfolio websites
• Learning JavaScript
• Lightweight projects
• Simple image galleries

However, if you use WordPress and want a faster setup, a plugin can be easier.

Final Thoughts

Creating an automatic image slider in JavaScript is simple when you understand the basic logic. You need HTML for the structure, CSS for the design, and JavaScript for the autoplay functionality.

The main idea is to show one image at a time, hide the others, and use JavaScript to move to the next image automatically.

You can also improve your slider by adding next and previous buttons, dots, captions, fade effects, hover pause, and responsive design.

Whether you are building a portfolio, blog, landing page, or product showcase, an automatic image slider can make your website more interactive and visually attractive.

FAQs

This page was last edited on 8 July 2026, at 6:04 pm