CSS scroll snap generator

<div class="snap" tabindex="0" role="region" aria-label="Carousel">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
</div>

<button type="button" data-snap="prev">Previous</button>
<button type="button" data-snap="next">Next</button>

.snap {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 16px;
}

.snap > * {
  flex: 0 0 80%;
  scroll-snap-align: start;
}

const snap = document.querySelector('.snap');
const items = [...snap.children];

// Each item's snap position: the scroll offset that puts its start edge
// on the start of the snapport, clamped to how far the box can scroll.
function positions() {
  const box = snap.getBoundingClientRect();
  const css = getComputedStyle(snap);
  const pad = (side) => parseFloat(css['scrollPadding' + side]) || 0;
  const line = box.left + snap.clientLeft + pad('Left');
  const max = snap.scrollWidth - snap.clientWidth;
  return items.map((item) => {
    const r = item.getBoundingClientRect();
    return Math.min(max, Math.max(0, snap.scrollLeft + r.left - line));
  });
}

// The next snap position past this one, or the last before it.
function go(step) {
  const now = snap.scrollLeft;
  const all = positions();
  const to = step > 0 ? all.find((p) => p > now + 1) : all.findLast((p) => p < now - 1);
  if (to === undefined) return;
  snap.scrollTo({ left: to, behavior: matchMedia('(prefers-reduced-motion: reduce)').matches ? 'auto' : 'smooth' });
}

document.querySelector('[data-snap="prev"]').addEventListener('click', () => go(-1));
document.querySelector('[data-snap="next"]').addEventListener('click', () => go(1));