Lazy-Loaded Carousel — HTML CSS JS Snippet

<div class="llc-wrap">
  <div class="llc-track" id="llcTrack">
    <div class="llc-slide" data-bg="#6366f1,#4338ca" data-icon="🎧"><div class="llc-placeholder"></div></div>
    <div class="llc-slide" data-bg="#0ea5e9,#0369a1" data-icon="📷"><div class="llc-placeholder"></div></div>
    <div class="llc-slide" data-bg="#ec4899,#9d174d" data-icon="⌚"><div class="llc-placeholder"></div></div>
    <div class="llc-slide" data-bg="#10b981,#047857" data-icon="🎮"><div class="llc-placeholder"></div></div>
    <div class="llc-slide" data-bg="#f59e0b,#b45309" data-icon="🔊"><div class="llc-placeholder"></div></div>
  </div>
  <div class="llc-controls">
    <button class="llc-btn" id="llcPrev" aria-label="Previous">‹</button>
    <div class="llc-dots" id="llcDots"></div>
    <button class="llc-btn" id="llcNext" aria-label="Next">›</button>
  </div>
  <p class="llc-log" id="llcLog">Loaded: none yet</p>
</div>

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,-apple-system,sans-serif;background:#f6f7f9;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.llc-wrap{width:100%;max-width:420px}
.llc-track{display:flex;overflow:hidden;border-radius:16px;position:relative;height:220px}
.llc-slide{position:absolute;inset:0;opacity:0;transition:opacity .4s ease;display:flex;align-items:center;justify-content:center}
.llc-slide.llc-active{opacity:1;z-index:1}
.llc-placeholder{width:100%;height:100%;background:#e5e7eb;display:flex;align-items:center;justify-content:center;font-size:11px;color:#9ca3af;font-weight:700}
.llc-slide.llc-loaded .llc-placeholder{background:var(--llc-bg);color:transparent}
.llc-slide.llc-loaded::after{content:attr(data-icon);position:absolute;font-size:56px;z-index:1}
.llc-controls{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:16px}
.llc-btn{width:36px;height:36px;border-radius:50%;background:#fff;border:1.5px solid #e3e5ea;color:#4b5563;font-size:17px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:border-color .15s,color .15s}
.llc-btn:hover{border-color:#6366f1;color:#6366f1}
.llc-dots{display:flex;gap:7px}
.llc-dot{width:7px;height:7px;border-radius:50%;background:#d1d5db;border:none;cursor:pointer;transition:background .2s,width .2s}
.llc-dot.active{background:#6366f1;width:20px;border-radius:4px}
.llc-log{text-align:center;font-size:11px;color:#9ca3af;margin-top:12px}

var slides = document.querySelectorAll('.llc-slide');
var dotsWrap = document.getElementById('llcDots');
var logEl = document.getElementById('llcLog');
var current = 0;
var loaded = {};

slides.forEach(function (s, i) {
  var d = document.createElement('button');
  d.className = 'llc-dot';
  d.setAttribute('aria-label', 'Go to slide ' + (i + 1));
  d.addEventListener('click', function () { goTo(i); });
  dotsWrap.appendChild(d);
});
var dots = document.querySelectorAll('.llc-dot');

function fakeLoad(index) {
  return new Promise(function (resolve) {
    // Simulates an async image fetch (a real implementation would set
    // img.src here and resolve on the load event). A short randomized delay
    // stands in for real network latency so the placeholder-to-content swap
    // is visibly distinct from an instant, synchronous render.
    setTimeout(function () { resolve(); }, 250 + Math.random() * 250);
  });
}

function ensureLoaded(index) {
  if (loaded[index]) return;
  loaded[index] = true;
  var slide = slides[index];
  fakeLoad(index).then(function () {
    slide.style.setProperty('--llc-bg', 'linear-gradient(160deg,' + slide.dataset.bg + ')');
    slide.classList.add('llc-loaded');
    logEl.textContent = 'Loaded: slide ' + (index + 1);
  });
}

// The IntersectionObserver watches every slide but only triggers a load for
// ones that actually become visible-or-nearly-visible — the neighbors of the
// active slide, driven by a generous rootMargin, load slightly BEFORE they're
// navigated to, so there's no visible pop-in the instant you click next.
var observer = new IntersectionObserver(function (entries) {
  entries.forEach(function (entry) {
    if (entry.isIntersecting) {
      var index = Array.prototype.indexOf.call(slides, entry.target);
      ensureLoaded(index);
    }
  });
}, { root: null, rootMargin: '0px 100% 0px 100%', threshold: 0.01 });

slides.forEach(function (s) { observer.observe(s); });

function render() {
  slides.forEach(function (s, i) { s.classList.toggle('llc-active', i === current); });
  dots.forEach(function (d, i) { d.classList.toggle('active', i === current); });
  ensureLoaded(current);
}

function goTo(i) { current = i; render(); }
function next() { goTo((current + 1) % slides.length); }
function prev() { goTo((current - 1 + slides.length) % slides.length); }

document.getElementById('llcNext').addEventListener('click', next);
document.getElementById('llcPrev').addEventListener('click', prev);
document.addEventListener('keydown', function (e) {
  if (e.key === 'ArrowRight') next();
  else if (e.key === 'ArrowLeft') prev();
});

render();