Scroll Snap Gallery — Free HTML CSS JS Snippet

<div class="scene">
  <div class="gallery" id="gallery">
    <div class="slide" style="background:linear-gradient(135deg,#6366f1,#8b5cf6)">
      <div class="slide-num">01</div>
      <h3>Design Systems</h3>
      <p>Building consistent UI at scale</p>
    </div>
    <div class="slide" style="background:linear-gradient(135deg,#ec4899,#f97316)">
      <div class="slide-num">02</div>
      <h3>Motion Design</h3>
      <p>Meaningful animations that guide users</p>
    </div>
    <div class="slide" style="background:linear-gradient(135deg,#0ea5e9,#10b981)">
      <div class="slide-num">03</div>
      <h3>Typography</h3>
      <p>Type hierarchy, scale, and rhythm</p>
    </div>
    <div class="slide" style="background:linear-gradient(135deg,#f59e0b,#ef4444)">
      <div class="slide-num">04</div>
      <h3>Color Theory</h3>
      <p>Palettes, contrast, and accessibility</p>
    </div>
    <div class="slide" style="background:linear-gradient(135deg,#8b5cf6,#0ea5e9)">
      <div class="slide-num">05</div>
      <h3>Layout & Grid</h3>
      <p>Spatial harmony and visual structure</p>
    </div>
  </div>
  <div class="dots" id="dots"></div>
</div>

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: system-ui, sans-serif; background: #0f172a; display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 20px; }

.scene { display: flex; flex-direction: column; align-items: center; gap: 16px; width: 100%; max-width: 440px; }

.gallery {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  gap: 12px;
  width: 100%;
  padding-bottom: 4px;
  scrollbar-width: none;
}
.gallery::-webkit-scrollbar { display: none; }

.slide {
  flex-shrink: 0;
  width: 100%;
  scroll-snap-align: start;
  border-radius: 18px;
  padding: 36px 28px;
  display: flex; flex-direction: column; gap: 10px;
  color: #fff; min-height: 220px;
  justify-content: flex-end;
}

.slide-num { font-size: 11px; font-weight: 700; opacity: 0.6; letter-spacing: 1px; }
h3 { font-size: 24px; font-weight: 800; line-height: 1.2; }
p  { font-size: 14px; opacity: 0.8; }

.dots { display: flex; gap: 6px; }
.dot { width: 6px; height: 6px; border-radius: 50%; background: #334155; cursor: pointer; transition: background 0.2s, width 0.2s; }
.dot.active { background: #6366f1; width: 20px; border-radius: 6px; }

const gallery = document.getElementById('gallery');
const dotsEl  = document.getElementById('dots');
const slides  = gallery.querySelectorAll('.slide');

slides.forEach((_, i) => {
  const d = document.createElement('div');
  d.className = 'dot' + (i === 0 ? ' active' : '');
  d.onclick = () => gallery.scrollTo({ left: slides[i].offsetLeft, behavior: 'smooth' });
  dotsEl.appendChild(d);
});

const dots = dotsEl.querySelectorAll('.dot');

gallery.addEventListener('scroll', () => {
  const idx = Math.round(gallery.scrollLeft / gallery.clientWidth);
  dots.forEach((d, i) => d.classList.toggle('active', i === idx));
});