Native Scroll-Snap Carousel — HTML CSS JS Snippet

<div class="nss-wrap">
  <div class="nss-track" id="nssTrack">
    <div class="nss-slide" style="background:linear-gradient(160deg,#6366f1,#4338ca)">1</div>
    <div class="nss-slide" style="background:linear-gradient(160deg,#0ea5e9,#0369a1)">2</div>
    <div class="nss-slide" style="background:linear-gradient(160deg,#ec4899,#9d174d)">3</div>
    <div class="nss-slide" style="background:linear-gradient(160deg,#10b981,#047857)">4</div>
    <div class="nss-slide" style="background:linear-gradient(160deg,#f59e0b,#b45309)">5</div>
  </div>
  <div class="nss-dots" id="nssDots"></div>
</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}
.nss-wrap{width:100%;max-width:420px}
.nss-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;border-radius:16px;scrollbar-width:none}
.nss-track::-webkit-scrollbar{display:none}
.nss-slide{flex:0 0 100%;scroll-snap-align:center;height:240px;display:flex;align-items:center;justify-content:center;font-size:56px;font-weight:800;color:#fff}
.nss-dots{display:flex;justify-content:center;gap:7px;margin-top:14px}
.nss-dot{width:7px;height:7px;border-radius:50%;background:#d1d5db;border:none;cursor:pointer;transition:background .2s,width .2s}
.nss-dot.active{background:#6366f1;width:20px;border-radius:4px}

var track = document.getElementById('nssTrack');
var slides = document.querySelectorAll('.nss-slide');
var dotsWrap = document.getElementById('nssDots');

slides.forEach(function (s, i) {
  var d = document.createElement('button');
  d.className = 'nss-dot';
  d.setAttribute('aria-label', 'Go to slide ' + (i + 1));
  d.addEventListener('click', function () {
    // scrollIntoView respects scroll-snap-align, so this both scrolls AND
    // lands exactly on the native snap point — no manual offset math needed.
    slides[i].scrollIntoView({ behavior: 'smooth', inline: 'center', block: 'nearest' });
  });
  dotsWrap.appendChild(d);
});
var dots = document.querySelectorAll('.nss-dot');

// IntersectionObserver watches which slide the native scroll has actually
// settled on, so the dots reflect real scroll position — including from a
// user's own trackpad/touch scroll, not just our own button clicks.
var observer = new IntersectionObserver(function (entries) {
  entries.forEach(function (entry) {
    if (entry.isIntersecting && entry.intersectionRatio > 0.6) {
      var index = Array.prototype.indexOf.call(slides, entry.target);
      dots.forEach(function (d, i) { d.classList.toggle('active', i === index); });
    }
  });
}, { root: track, threshold: [0.6] });

slides.forEach(function (s) { observer.observe(s); });