CSS Scroll Snap — Build a Carousel With Zero JavaScript

Carousel libraries: 40KB of JS. Scroll snap: 4 lines of CSS with native momentum, touch support and accessibility.

The whole carousel

.carousel {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;   /* snap on the x axis, always */
  gap: 16px;
  scrollbar-width: none;           /* hide the bar */
}
.slide {
  flex: 0 0 85%;                   /* peek of the next slide */
  scroll-snap-align: center;
}

Full-page snap sections

html { scroll-snap-type: y proximity; }   /* proximity = gentler than mandatory */
section { min-height: 100vh; scroll-snap-align: start; }

Polish

• scroll-padding on the container = offset for sticky headers
• Add prev/next buttons with 3 lines of JS: el.scrollBy({left: 300, behavior: "smooth"})
• mandatory always lands on a snap point; proximity only when close — prefer proximity for long content (mandatory can trap scrolling)

Demo it in the Playground in two minutes.