CSS scroll-snap.
Carousels without JavaScript.

User swipes right:
┌─────────────┐
│ Slide 1 │ → snaps to start
└─────────────┘
Swipe more:
┌─────────────┐
│ Slide 2 │ → snaps to start
└─────────────┘

✅ Each slide is full width (flex: 0 0 100%).
✅ scroll-snap-align: start makes each slide
snap to the left edge of the container.
✅ scroll-snap-type: x mandatory forces the
browser to always land on a slide edge.
✅ Native momentum on touch devices.
✅ Works with mouse wheel, trackpad, keyboard arrows.

gap: 1rem adds space between slides.
flex: 0 0 100% means "don't shrink, don't grow,
base size 100% of container". This is the
correct flex shorthand — flex: 1 would let
the slide grow, breaking the layout.

scrollbar-width: none hides the scrollbar.
::--webkit-scrollbar { display: none } does the same
for Chrome/Safari/Edge.
Hide only if you have alternative navigation.

mandatory:
✅ Every scroll ends exactly on a snap point.
✅ Precise — always shows a full slide.
❌ Can trap users — can't stop between slides.
✅ Best for: full-width carousels, full-page scroll.

proximity:
✅ Snaps when close, scrolls freely otherwise.
✅ Less aggressive — user feels in control.
❌ May not snap at all if scroll is far from a point.
✅ Best for: image galleries, mixed content,
carousels where users might want partial scroll.

Rule of thumb:
If every slide is the full width of the container
→ mandatory.
If slides are varied widths or you want free scroll
→ proximity.

Edge case — tabnavigation:
Users navigating with keyboard arrows (not Tab)
can scroll past proximity snap points freely.
With mandatory, they snap to each slide.
This is usually what you want.

⚠️ mandatory on a page with tall sections (y axis)
can trap users who want to scroll freely.
Only use scroll-snap-type: y mandatory on
full-page scroll designs, not on content pages.

Accessibility checklist for snap carousels:

✅ Prefer proximity over mandatory when possible.
Mandatory can trap users between slides.

✅ Respect prefers-reduced-motion:
• smooth scroll only if user hasn't requested reduced motion.
• remove any auto-play behavior entirely.

✅ Provide keyboard navigation:
• focus visible on all controls.
• keyboard arrow keys work natively.

✅ Provide non-scroll navigation:
• visible arrows (prev/next).
• dot indicators showing current slide.
• "skip carousel" link if it's a big component.

✅ Don't hide the scrollbar without alternatives.
If hidden, arrows/dots must be visible.

✅ Test with keyboard only, and with a screen reader.
Tab through the carousel — does focus move correctly?
Arrow keys — does the carousel respond?

✅ Announce state changes:
screen readers should know when the slide changes.
(JS required for this — beyond scroll-snap's scope.)