Caption Crossfade Carousel — HTML CSS JS Snippet

<div class="ccc-wrap" id="cccWrap">
  <div class="ccc-image" id="cccImage"></div>
  <div class="ccc-caption">
    <h2 id="cccTitle"></h2>
    <p id="cccText"></p>
  </div>
  <div class="ccc-dots" id="cccDots"></div>
</div>

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,-apple-system,sans-serif;background:#0b0e14;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.ccc-wrap{position:relative;width:100%;max-width:480px;height:300px;border-radius:16px;overflow:hidden;box-shadow:0 18px 40px rgba(0,0,0,.5)}
.ccc-image{position:absolute;inset:0;transition:background .6s ease}
.ccc-caption{position:absolute;left:0;right:0;bottom:0;padding:26px 24px 22px;background:linear-gradient(0deg,rgba(0,0,0,.7),transparent)}
.ccc-caption h2{color:#fff;font-size:20px;font-weight:800;margin-bottom:6px;opacity:0;transform:translateY(10px);transition:opacity .4s ease .15s,transform .4s ease .15s}
.ccc-caption p{color:rgba(255,255,255,.85);font-size:13px;opacity:0;transform:translateY(10px);transition:opacity .4s ease .28s,transform .4s ease .28s}
.ccc-wrap.ccc-show h2,.ccc-wrap.ccc-show p{opacity:1;transform:translateY(0)}
.ccc-dots{position:absolute;top:16px;right:16px;display:flex;gap:6px;z-index:2}
.ccc-dot{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.35);border:none;cursor:pointer;transition:background .2s,width .2s}
.ccc-dot.active{background:#fff;width:20px;border-radius:4px}

var SLIDES = [
  { bg: '#6366f1,#4338ca', title: 'Build faster', text: 'Ship features in days, not sprints.' },
  { bg: '#ec4899,#9d174d', title: 'Scale freely', text: 'Infra that grows without a rewrite.' },
  { bg: '#0ea5e9,#0369a1', title: 'Stay in sync', text: 'Real-time collaboration, built in.' },
];

var wrap = document.getElementById('cccWrap');
var image = document.getElementById('cccImage');
var titleEl = document.getElementById('cccTitle');
var textEl = document.getElementById('cccText');
var dotsWrap = document.getElementById('cccDots');
var current = 0;

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

function render() {
  var s = SLIDES[current];
  // The image crossfades on its own timer (a plain background transition),
  // while the caption is hidden FIRST, its text swapped while invisible, and
  // only then shown again — two independently-timed transitions, staggered
  // slightly (the caption's delay values in CSS), so text never appears to
  // "jump-cut" mid-fade the way it would if both changed in the same instant.
  image.style.background = 'linear-gradient(160deg,' + s.bg + ')';
  wrap.classList.remove('ccc-show');
  window.requestAnimationFrame(function () {
    titleEl.textContent = s.title;
    textEl.textContent = s.text;
    requestAnimationFrame(function () { wrap.classList.add('ccc-show'); });
  });
  dots.forEach(function (d, i) { d.classList.toggle('active', i === current); });
}

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

var timer = setInterval(next, 4500);
function resetTimer() { clearInterval(timer); timer = setInterval(next, 4500); }

dots.forEach(function (d) { d.addEventListener('click', resetTimer); });

document.addEventListener('keydown', function (e) {
  if (e.key === 'ArrowRight') { next(); resetTimer(); }
  else if (e.key === 'ArrowLeft') { goTo((current - 1 + SLIDES.length) % SLIDES.length); resetTimer(); }
});

render();
wrap.classList.add('ccc-show');