responsive

CSS Scroll Snap Carousel

Touch-friendly horizontal carousel with CSS scroll-snap — no JavaScript required.

CSS Scroll Snap creates carousel-like snapping behaviour using scroll-snap-type on the container and scroll-snap-align on the items. It works with native browser scroll (touch, mouse wheel, trackpad) and requires no JavaScript. Combine with overflow-x: auto and scrollbar-width: none for a clean, accessible carousel.

Live CSS Editor

CSS

Preview

/* Horizontal scroll snap carousel */
.carousel {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 16px;

/* Hide scrollbar visually (still scrollable) */
  scrollbar-width: none;          /* Firefox */
  -ms-overflow-style: none;       /* IE/Edge */
}

.carousel::-webkit-scrollbar {
  display: none;                  /* Chrome/Safari */
}

.carousel-item {
  flex: 0 0 300px;                /* Fixed item width */
  scroll-snap-align: start;       /* Snap to item start */
  border-radius: 12px;
  overflow: hidden;
}

/* Full-width slides (one at a time) */
.slides {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.slides::-webkit-scrollbar { display: none; }

.slide {
  flex: 0 0 100%;                 /* Each slide = full width */
  scroll-snap-align: start;
}

/* Vertical scroll snap */
.vertical-snap {
  height: 100vh;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
}

.vertical-snap > section {
  height: 100vh;
  scroll-snap-align: start;
}

/* scroll-padding to account for sticky header */
.carousel {
  scroll-padding-left: 24px;
}

Edit CSS → see live previewTab = 2 spaces

Usage Note

scroll-snap-type: x mandatory snaps firmly to each item. Use proximity instead of mandatory for a looser snap that only activates near a snap point — better for shorter scroll areas where you don't want to force snapping on every scroll.