Momentum Drag Carousel — HTML CSS JS Snippet

<div class="mdc-wrap">
  <div class="mdc-viewport" id="mdcViewport">
    <div class="mdc-track" id="mdcTrack">
      <div class="mdc-card" style="background:linear-gradient(160deg,#6366f1,#4338ca)">01</div>
      <div class="mdc-card" style="background:linear-gradient(160deg,#0ea5e9,#0369a1)">02</div>
      <div class="mdc-card" style="background:linear-gradient(160deg,#ec4899,#9d174d)">03</div>
      <div class="mdc-card" style="background:linear-gradient(160deg,#10b981,#047857)">04</div>
      <div class="mdc-card" style="background:linear-gradient(160deg,#f59e0b,#b45309)">05</div>
      <div class="mdc-card" style="background:linear-gradient(160deg,#8b5cf6,#5b21b6)">06</div>
    </div>
  </div>
  <p class="mdc-hint">Drag or flick the cards — they glide with momentum and snap to the nearest one.</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}
.mdc-wrap{width:100%;max-width:560px}
.mdc-viewport{overflow:hidden;border-radius:16px;cursor:grab}
.mdc-viewport.mdc-grabbing{cursor:grabbing}
.mdc-track{display:flex;gap:14px;padding:6px;will-change:transform}
.mdc-card{flex:0 0 150px;height:180px;border-radius:14px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:30px;font-weight:800;box-shadow:0 10px 24px rgba(15,23,42,.18);user-select:none}
.mdc-hint{text-align:center;color:#6b7080;font-size:12px;margin-top:14px}

var viewport = document.getElementById('mdcViewport');
var track = document.getElementById('mdcTrack');
var cards = document.querySelectorAll('.mdc-card');
var cardW = 150 + 14; // width + gap

var offset = 0;
var min = 0, max = 0;
var dragging = false;
var startX = 0, startOffset = 0;
var lastX = 0, lastT = 0, velocity = 0;
var rafId = null;

function computeBounds() {
  var trackWidth = cards.length * cardW - 14;
  var viewportWidth = viewport.getBoundingClientRect().width;
  min = Math.min(0, viewportWidth - trackWidth - 12);
  max = 0;
}

function setTransform(x, animated) {
  track.style.transition = animated ? 'transform .35s cubic-bezier(.25,.8,.3,1)' : 'none';
  track.style.transform = 'translateX(' + x + 'px)';
}

function clampBounce(x) {
  if (x > max) return max + (x - max) * 0.35;
  if (x < min) return min + (x - min) * 0.35;
  return x;
}

function pointerDown(e) {
  dragging = true;
  viewport.classList.add('mdc-grabbing');
  cancelAnimationFrame(rafId);
  var x = e.touches ? e.touches[0].clientX : e.clientX;
  startX = x; startOffset = offset; lastX = x; lastT = Date.now(); velocity = 0;
  setTransform(offset, false);
}

function pointerMove(e) {
  if (!dragging) return;
  var x = e.touches ? e.touches[0].clientX : e.clientX;
  var now = Date.now();
  var dt = now - lastT;
  if (dt > 0) velocity = (x - lastX) / dt;
  lastX = x; lastT = now;
  offset = clampBounce(startOffset + (x - startX));
  setTransform(offset, false);
}

function pointerUp() {
  if (!dragging) return;
  dragging = false;
  viewport.classList.remove('mdc-grabbing');
  var projected = offset + velocity * 180;
  snapTo(projected);
}

function snapTo(target) {
  var index = Math.round(-target / cardW);
  index = Math.max(0, Math.min(cards.length - 1, index));
  offset = Math.max(min, Math.min(max, -index * cardW));
  setTransform(offset, true);
}

viewport.addEventListener('pointerdown', pointerDown);
window.addEventListener('pointermove', pointerMove);
window.addEventListener('pointerup', pointerUp);
viewport.addEventListener('touchstart', pointerDown, { passive: true });
window.addEventListener('touchmove', pointerMove, { passive: true });
window.addEventListener('touchend', pointerUp);

window.addEventListener('resize', computeBounds);
computeBounds();
setTransform(0, false);