View Transition API Carousel — HTML CSS JS Snippet

<div class="vtc-wrap">
  <div class="vtc-stage" id="vtcStage">
    <div class="vtc-slide" style="background:linear-gradient(160deg,#6366f1,#4338ca)"><span>🎧</span><h3>Headphones</h3></div>
  </div>
  <div class="vtc-controls">
    <button class="vtc-btn" id="vtcPrev" aria-label="Previous">‹</button>
    <div class="vtc-dots" id="vtcDots"></div>
    <button class="vtc-btn" id="vtcNext" aria-label="Next">›</button>
  </div>
  <p class="vtc-support" id="vtcSupport"></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}
.vtc-wrap{display:flex;flex-direction:column;align-items:center;gap:18px}
.vtc-stage{width:220px;height:220px}
.vtc-slide{width:100%;height:100%;border-radius:20px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;box-shadow:0 16px 36px rgba(15,23,42,.2);view-transition-name:vtc-active-slide}
.vtc-slide span{font-size:46px}
.vtc-slide h3{color:#fff;font-size:16px;font-weight:800}
.vtc-controls{display:flex;align-items:center;gap:16px}
.vtc-btn{width:38px;height:38px;border-radius:50%;background:#fff;border:1.5px solid #e3e5ea;color:#4b5563;font-size:19px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:border-color .15s,color .15s}
.vtc-btn:hover{border-color:#6366f1;color:#6366f1}
.vtc-dots{display:flex;gap:7px}
.vtc-dot{width:7px;height:7px;border-radius:50%;background:#d1d5db;border:none;cursor:pointer;transition:background .2s,width .2s}
.vtc-dot.active{background:#6366f1;width:20px;border-radius:4px}
.vtc-support{font-size:11px;color:#9ca3af}

var ITEMS = [
  { icon: '🎧', title: 'Headphones', bg: '#6366f1,#4338ca' },
  { icon: '📷', title: 'Camera', bg: '#ec4899,#9d174d' },
  { icon: '⌚', title: 'Watch', bg: '#0ea5e9,#0369a1' },
  { icon: '🎮', title: 'Console', bg: '#10b981,#047857' },
];

var stage = document.getElementById('vtcStage');
var dotsWrap = document.getElementById('vtcDots');
var supportNote = document.getElementById('vtcSupport');
var current = 0;

var supported = typeof document.startViewTransition === 'function';
supportNote.textContent = supported
  ? 'Your browser supports the View Transitions API — real morph animation below.'
  : 'Your browser lacks View Transitions API support — falls back to an instant swap.';

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

function paint() {
  var it = ITEMS[current];
  stage.innerHTML = '<div class="vtc-slide" style="background:linear-gradient(160deg,' + it.bg + ')"><span>' + it.icon + '</span><h3>' + it.title + '</h3></div>';
  dots.forEach(function (d, i) { d.classList.toggle('active', i === current); });
}

function update(newIndex) {
  current = newIndex;
  // document.startViewTransition captures a snapshot of the DOM before AND
  // after the callback runs, then cross-fades/morphs between them for any
  // element carrying a view-transition-name — here, the slide itself. No
  // manual keyframes are written for this transition at all; the browser
  // interpolates position, size, and appearance between the two snapshots.
  if (supported) {
    document.startViewTransition(function () { paint(); });
  } else {
    paint();
  }
}

function next() { update((current + 1) % ITEMS.length); }
function prev() { update((current - 1 + ITEMS.length) % ITEMS.length); }
function goTo(i) { update(i); }

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

paint();