CSS carousels

Limited support Reference ↗

CSS can generate previous/next controls and markers for a scroll-snap container. The browser keeps navigation state in sync, removing a surprising amount of JavaScript.

.carousel {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-marker-group: after;
}

.carousel::scroll-button(left) {
  content: '‹' / 'Previous';
}

.carousel::scroll-button(right) {
  content: '›' / 'Next';
}

.carousel > * {
  scroll-snap-align: center;
}

.carousel > *::scroll-marker {
  content: attr(data-label);
}

Support is still limited. Keep the scroll container useful without generated controls, provide meaningful marker names, and test keyboard order.