Drag Scroll Row — Free HTML CSS JS Momentum Carousel Snippet

<div class="ds-wrap">
  <h2 class="ds-title">Continue watching</h2>
  <div class="ds-row" id="dsRow" tabindex="0" aria-label="Scrollable gallery, drag to browse">
    <div class="ds-track" id="dsTrack"></div>
  </div>
  <div class="ds-hint">Drag, flick, or use the arrow keys</div>
</div>

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,-apple-system,sans-serif;background:#0a0a12;color:#fff;display:flex;align-items:center;min-height:100vh}

.ds-wrap{width:100%;max-width:840px;margin:0 auto;padding:24px}
.ds-title{font-size:22px;font-weight:800;margin-bottom:14px;padding-left:4px}
.ds-row{overflow:hidden;cursor:grab;-webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent)}
.ds-row.drag{cursor:grabbing}
.ds-row:focus-visible{outline:2px solid #6366f1;outline-offset:3px;border-radius:12px}
.ds-track{display:flex;gap:14px;padding:6px 4px;will-change:transform}

.ds-tile{width:170px;flex-shrink:0;user-select:none}
.ds-poster{aspect-ratio:2/3;border-radius:12px;background:var(--g);position:relative;overflow:hidden;box-shadow:0 14px 28px -14px rgba(0,0,0,.7)}
.ds-poster span{position:absolute;left:10px;bottom:10px;font-size:13px;font-weight:800;z-index:1}
.ds-poster::after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.5),transparent 55%)}
.ds-cap{font-size:12px;color:#8b8ba3;margin-top:8px;padding-left:2px}
.ds-hint{margin-top:14px;text-align:center;font-size:12.5px;color:#55556e}

var GRADS = ['#6366f1,#8b5cf6','#ec4899,#f43f5e','#22d3ee,#3b82f6','#34d399,#10b981','#f59e0b,#ef4444','#a78bfa,#6366f1','#f472b6,#db2777','#2dd4bf,#0ea5e9','#fb7185,#e11d48','#60a5fa,#2563eb'];
var track = document.getElementById('dsTrack');
GRADS.forEach(function (g, i) {
  track.insertAdjacentHTML('beforeend',
    '<div class="ds-tile"><div class="ds-poster" style="--g:linear-gradient(160deg,' + g + ')"><span>Title ' + (i + 1) + '</span></div><div class="ds-cap">Episode ' + (i + 1) + ' · 48m</div></div>');
});

var row = document.getElementById('dsRow');
var pos = 0, min = 0, vel = 0, dragging = false, startX = 0, startPos = 0, lastX = 0, raf = null;

function bounds() { min = Math.min(0, row.clientWidth - track.scrollWidth - 8); }
function apply() { track.style.transform = 'translateX(' + pos + 'px)'; }
function clamp(v) { return Math.max(min, Math.min(0, v)); }
bounds(); window.addEventListener('resize', function () { bounds(); pos = clamp(pos); apply(); });

row.addEventListener('pointerdown', function (e) {
  dragging = true; row.classList.add('drag');
  startX = lastX = e.clientX; startPos = pos; vel = 0;
  row.setPointerCapture(e.pointerId);
  if (raf) cancelAnimationFrame(raf);
});
row.addEventListener('pointermove', function (e) {
  if (!dragging) return;
  pos = clamp(startPos + (e.clientX - startX));
  vel = e.clientX - lastX; lastX = e.clientX;
  apply();
});
function release() {
  if (!dragging) return;
  dragging = false; row.classList.remove('drag');
  // Momentum: keep gliding, decaying velocity each frame until it settles.
  function glide() {
    vel *= 0.93;
    pos = clamp(pos + vel);
    apply();
    if (Math.abs(vel) > 0.4) raf = requestAnimationFrame(glide);
  }
  glide();
}
row.addEventListener('pointerup', release);
row.addEventListener('pointercancel', release);

// Keyboard: arrows nudge by one tile width.
row.addEventListener('keydown', function (e) {
  if (e.key === 'ArrowRight') { pos = clamp(pos - 184); apply(); e.preventDefault(); }
  if (e.key === 'ArrowLeft')  { pos = clamp(pos + 184); apply(); e.preventDefault(); }
});