Welcome to this tutorial on Design an Auto-Playing Image Slider with JS.

HTML Structure

<div class="auto-slider-container" id="auto-slider">
  <div class="progress-bar">
    <div class="progress-fill" id="progress"></div>
  </div>
  <div class="slides">
    <div class="slide auto-slide active">
      <img src="https://images.unsplash.com/photo-1542224566-6e85f2e6772f?auto=format&fit=crop&w=800&q=80" alt="Nature 1">
      <h2 class="title">Explore The World</h2>
    </div>
    <div class="slide auto-slide">
      <img src="https://images.unsplash.com/photo-1447752875215-b2761acb3c5d?auto=format&fit=crop&w=800&q=80" alt="Nature 2">
      <h2 class="title">Discover Nature</h2>
    </div>
    <div class="slide auto-slide">
      <img src="https://images.unsplash.com/photo-1433086966358-54859d0ed716?auto=format&fit=crop&w=800&q=80" alt="Nature 3">
      <h2 class="title">Find Peace</h2>
    </div>
  </div>
</div>

CSS Styling

.auto-slider-container {
  position: relative;
  width: 100%;
  max-width: 900px;
  height: 500px;
  margin: 50px auto;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0,0,0,0.4);
  font-family: 'Poppins', sans-serif;
  background-color: #222;
}
.progress-bar {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 5px;
  background: rgba(255,255,255,0.2);
  z-index: 10;
}
.progress-fill {
  height: 100%;
  width: 0;
  background: #ff5e62;
  transition: width 0.1s linear;
}
.slides { width: 100%; height: 100%; position: relative; }
.auto-slide {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  opacity: 0;
  transition: opacity 0.8s ease-in-out, transform 0.8s ease-in-out;
  transform: scale(1.05);
}
.auto-slide.active { opacity: 1; transform: scale(1); z-index: 2; }
.auto-slide img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: brightness(0.7);
}
.title {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 3rem;
  font-weight: 700;
  text-shadow: 2px 2px 10px rgba(0,0,0,0.5);
  text-align: center;
  opacity: 0;
  transition: 0.5s 0.3s ease;
}
.auto-slide.active .title {
  opacity: 1;
  transform: translate(-50%, -40%);
}
@media(max-width: 768px) {
  .title { font-size: 1.8rem; }
  .auto-slider-container { height: 350px; border-radius: 0; }
}

JavaScript Logic

document.addEventListener('DOMContentLoaded', () => {
    const slides = document.querySelectorAll('.auto-slide');
    const progressFill = document.getElementById('progress');
    if(!slides.length || !progressFill) return;

    let currentIndex = 0;
    let progress = 0;
    const intervalTime = 5000;
    const tickRate = 50;
    const step = (tickRate / intervalTime) * 100;

    function nextSlide() {
        slides[currentIndex].classList.remove('active');
        currentIndex = (currentIndex + 1) % slides.length;
        slides[currentIndex].classList.add('active');
        progress = 0;
    }

    function runSlider() {
        setInterval(() => {
            progress += step;
            progressFill.style.width = `${progress}%`;
            
            if (progress >= 100) {
                nextSlide();
            }
        }, tickRate);
    }

    slides[currentIndex].classList.add('active');
    runSlider();
});