← All Examples

Scroll Snap Carousel

A horizontal carousel using scroll-snap-type and scroll-snap-align.

Published May 19, 2026

Demo

Slide 1 of 5

Slide 2 of 5

Slide 3 of 5

Slide 4 of 5

Slide 5 of 5

← scroll or swipe →

HTML
				
				<div class="carousel">
  <div class="carousel-slide">Slide 1</div>
  <div class="carousel-slide">Slide 2</div>
  <div class="carousel-slide">Slide 3</div>
</div>

			

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

.carousel-slide {
  flex: 0 0 200px;
  height: 130px;
  border-radius: 10px;
  scroll-snap-align: start;
}

			

How it works

scroll-snap-type:x mandatory on the container forces snapping after each scroll gesture. scroll-snap-align:start on each slide defines where it snaps to. The container is just a flex row with overflow-x:auto. No JS, no next/prev buttons required — the browser handles the snapping physics.

JavaScript needed for drag

Click-and-drag scrolling on desktop is a browser limitation — overflow-x: auto containers don't respond to mouse drag without JavaScript pointer event handlers. Scrollwheel on desktop and touch swipe on mobile work natively with pure CSS.