Premium Fullscreen Hero Slider in JavaScript

Welcome to this tutorial on Premium Fullscreen Hero Slider.

HTML Structure

<div class="hero-slider">
  <div class="hero-slide active">
    <img src="https://images.unsplash.com/photo-1469854523086-cc02fe5d8800?auto=format&fit=crop&w=1920&q=80" alt="Travel">
    <div class="hero-content">
      <h1 class="hero-title">Wanderlust</h1>
      <p class="hero-subtitle">Discover the uncharted territories of our beautiful planet.</p>
      <a href="#" class="hero-btn">Explore Now</a>
    </div>
  </div>
  <div class="hero-slide">
    <img src="https://images.unsplash.com/photo-1493246507139-91e8fad9978e?auto=format&fit=crop&w=1920&q=80" alt="Mountains">
    <div class="hero-content">
      <h1 class="hero-title">Elevation</h1>
      <p class="hero-subtitle">Reach new heights and breathe the crisp mountain air.</p>
      <a href="#" class="hero-btn">View Tours</a>
    </div>
  </div>
  <div class="hero-slide">
    <img src="https://images.unsplash.com/photo-1533446002934-2e9b110bc595?auto=format&fit=crop&w=1920&q=80" alt="Desert">
    <div class="hero-content">
      <h1 class="hero-title">Serenity</h1>
      <p class="hero-subtitle">Find peace in the vast emptiness of the golden dunes.</p>
      <a href="#" class="hero-btn">Start Journey</a>
    </div>
  </div>
  
  <div class="hero-nav">
    <button class="hero-arrow prev">&#10094;</button>
    <button class="hero-arrow next">&#10095;</button>
  </div>
</div>

CSS Styling

body { margin: 0; padding: 0; font-family: 'Inter', sans-serif; }
.hero-slider {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background-color: #000;
}
.hero-slide {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  opacity: 0;
  transition: opacity 1s ease-in-out;
  z-index: 1;
}
.hero-slide.active { opacity: 1; z-index: 2; }
.hero-slide img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.1);
  transition: transform 6s linear;
  filter: brightness(0.6);
}
.hero-slide.active img { transform: scale(1); }
.hero-content {
  position: absolute;
  top: 50%; left: 10%;
  transform: translateY(-50%);
  color: white;
  max-width: 600px;
}
.hero-title {
  font-size: 5rem;
  margin: 0 0 10px 0;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 2px;
  transform: translateY(30px);
  opacity: 0;
  transition: transform 0.8s ease 0.3s, opacity 0.8s ease 0.3s;
}
.hero-subtitle {
  font-size: 1.5rem;
  margin-bottom: 30px;
  line-height: 1.5;
  transform: translateY(30px);
  opacity: 0;
  transition: transform 0.8s ease 0.5s, opacity 0.8s ease 0.5s;
}
.hero-btn {
  display: inline-block;
  padding: 15px 40px;
  background: white;
  color: black;
  text-decoration: none;
  font-size: 1.2rem;
  font-weight: bold;
  border-radius: 30px;
  transform: translateY(30px);
  opacity: 0;
  transition: transform 0.8s ease 0.7s, opacity 0.8s ease 0.7s, background 0.3s;
}
.hero-btn:hover { background: #ccc; }
.hero-slide.active .hero-title,
.hero-slide.active .hero-subtitle,
.hero-slide.active .hero-btn {
  transform: translateY(0);
  opacity: 1;
}
.hero-nav {
  position: absolute;
  bottom: 50px;
  right: 10%;
  z-index: 10;
  display: flex;
  gap: 20px;
}
.hero-arrow {
  background: transparent;
  color: white;
  border: 1px solid white;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  font-size: 24px;
  cursor: pointer;
  transition: 0.3s;
}
.hero-arrow:hover { background: white; color: black; }
@media (max-width: 768px) {
  .hero-title { font-size: 3rem; }
  .hero-subtitle { font-size: 1.2rem; }
  .hero-nav { right: 50%; transform: translateX(50%); }
}

JavaScript Logic

document.addEventListener('DOMContentLoaded', () => {
    const slides = document.querySelectorAll('.hero-slide');
    const nextBtn = document.querySelector('.hero-arrow.next');
    const prevBtn = document.querySelector('.hero-arrow.prev');
    if(!slides.length || !nextBtn || !prevBtn) return;

    let currentIndex = 0;

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

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

    nextBtn.addEventListener('click', nextSlide);
    prevBtn.addEventListener('click', prevSlide);
    
    // Auto play
    setInterval(nextSlide, 7000);
});