Hero with Auto-Rotating Background Carousel — Free HTML CSS JS Snippet

<section class="rbg-hero" id="rbgHero">
  <div class="rbg-layer rbg-layer-active" data-bg="1"></div>
  <div class="rbg-layer" data-bg="2"></div>
  <div class="rbg-layer" data-bg="3"></div>
  <div class="rbg-layer" data-bg="4"></div>
  <div class="rbg-scrim"></div>

  <div class="rbg-content">
    <span class="rbg-eyebrow">Destinations, reimagined</span>
    <h1 class="rbg-h1">Wherever you're<br>going, go further</h1>
    <p class="rbg-sub">Curated stays across four continents. Every place, one booking flow.</p>
    <a href="#" class="rbg-cta">Explore destinations</a>
  </div>

  <div class="rbg-dots" id="rbgDots">
    <button class="rbg-dot rbg-dot-active" data-index="0" aria-label="Show slide 1"></button>
    <button class="rbg-dot" data-index="1" aria-label="Show slide 2"></button>
    <button class="rbg-dot" data-index="2" aria-label="Show slide 3"></button>
    <button class="rbg-dot" data-index="3" aria-label="Show slide 4"></button>
  </div>
</section>

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,-apple-system,sans-serif;background:#0b0b0f;color:#fff}
.rbg-hero{position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center;overflow:hidden}
.rbg-layer{position:absolute;inset:0;opacity:0;transition:opacity 1.4s ease;background-size:cover}
.rbg-layer-active{opacity:1}
.rbg-layer[data-bg="1"]{background:linear-gradient(135deg,#0f2027,#203a43 50%,#2c5364)}
.rbg-layer[data-bg="2"]{background:linear-gradient(135deg,#3a1c71,#d76d77 55%,#ffaf7b)}
.rbg-layer[data-bg="3"]{background:linear-gradient(135deg,#134e5e,#71b280)}
.rbg-layer[data-bg="4"]{background:linear-gradient(135deg,#1e3c72,#2a5298 60%,#7303c0)}
.rbg-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,.55));z-index:1}

.rbg-content{position:relative;z-index:2;text-align:center;display:flex;flex-direction:column;align-items:center;gap:16px;padding:24px;max-width:640px}
.rbg-eyebrow{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#fde68a}
.rbg-h1{font-size:clamp(32px,6vw,60px);font-weight:800;line-height:1.1;letter-spacing:-.02em;text-shadow:0 4px 24px rgba(0,0,0,.3)}
.rbg-sub{font-size:16px;color:#e2e8f0;line-height:1.7;max-width:460px}
.rbg-cta{margin-top:6px;background:#fff;color:#1a1a1a;font-weight:700;font-size:15px;padding:13px 28px;border-radius:9px;text-decoration:none;transition:transform .15s}
.rbg-cta:hover{transform:translateY(-2px)}

.rbg-dots{position:absolute;bottom:32px;left:50%;transform:translateX(-50%);z-index:2;display:flex;gap:10px}
.rbg-dot{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.35);border:none;cursor:pointer;padding:0;transition:background .2s,transform .2s}
.rbg-dot-active{background:#fff;transform:scale(1.25)}

// Real cross-fading background carousel: a timer advances the active layer, and dots reflect + control real state.
const layers = Array.from(document.querySelectorAll('.rbg-layer'));
const dots = Array.from(document.querySelectorAll('.rbg-dot'));
const hero = document.getElementById('rbgHero');

const INTERVAL_MS = 4200;
let activeIndex = 0;
let timerId = null;

function goTo(index) {
  layers[activeIndex].classList.remove('rbg-layer-active');
  dots[activeIndex].classList.remove('rbg-dot-active');

  activeIndex = (index + layers.length) % layers.length;

  layers[activeIndex].classList.add('rbg-layer-active');
  dots[activeIndex].classList.add('rbg-dot-active');
}

function next() {
  goTo(activeIndex + 1);
}

function startTimer() {
  clearInterval(timerId);
  timerId = setInterval(next, INTERVAL_MS);
}

dots.forEach((dot) => {
  dot.addEventListener('click', () => {
    const index = parseInt(dot.dataset.index, 10);
    goTo(index);
    startTimer(); // restart the cycle so manual selection doesn't get overridden a moment later
  });
});

// Pause the rotation while the hero isn't visible, so it doesn't burn cycles off-screen.
if ('IntersectionObserver' in window) {
  const observer = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) startTimer();
      else clearInterval(timerId);
    });
  }, { threshold: 0.1 });
  observer.observe(hero);
} else {
  startTimer();
}