CSS Scroll Snap Carousel

Create scroll-snap carousels and galleries using CSS scroll-snap properties for touch-friendly mobile interactions.

.carousel {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: 1rem;
}

.carousel > * {
  scroll-snap-align: start;
  flex: 0 0 300px;
}

Report a problem with this exampleOpens a pre-filled issue on GitHub.