I Rejected Carousels. Then I Built One.

I opened my site on a phone and the Services section was five cards stacked vertically. Each one about 300 pixels tall. Scrolling through all five felt like a chore.

This is the mobile companion to the capability cards I wrote about last time. My first instinct was to reach for a carousel. My second instinct was to stop.

I'd read the usability articles. NN/g says people often scroll straight past carousels and miss everything except the first frame [1]. A single image can give people the wrong idea about the whole. Carousels are an anti-pattern, the UX crowd says. So I believed them and left the five cards stacked vertically, calling it "accessible."

But the stacked layout wasn't great either. On mobile, nobody's scrolling through five service cards. They're swiping past all of them.

The Real Problem Wasn't Carousels

The usability criticism targets specific carousel behaviors: auto-rotation and showing only one item at a time [1]. Auto-rotation means content moves on its own, which is disorienting. Single-frame visibility means you only see one card, so you have no idea there's more unless you happen to notice the dot indicators.

What if the carousel didn't rotate automatically? What if it showed a hint of the next card? And what if it used pure CSS, no JavaScript?

That's where scroll snap comes in. MDN describes it as making content stick to a specific position when scrolling finishes instead of stopping at an arbitrary point [2]. You set scroll-snap-type on the container and scroll-snap-align on each card. The browser handles the rest.

The relevant CSS is short:

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

.carousel > * {
  scroll-snap-align: start;
  min-width: 80vw;
}

scroll-snap-type: x mandatory tells the browser to enforce snapping on the horizontal axis. scroll-snap-align: start means each card snaps to the left edge. The min-width: 80vw is the key: each card takes up 80% of the viewport, so the next card peeks in from the right. That sliver tells the user "there's more here" without needing dots or arrows [3].

Scroll snap is baseline widely available since April 2022 [3]. No polyfill, no JavaScript, no library. The browser does the physics.

Desktop Stays Stacked, Mobile Gets the Carousel

I only apply the carousel behavior on mobile. On desktop, the cards stay in a grid. No need for a carousel when you have the screen real estate to show everything at once. A simple media query switches between the two layouts.

I'll say something controversial here: for cases like this, a CSS-only carousel beats both the "stack everything" and "use a JS carousel library" approaches. Stacking everything on mobile is lazy UX. Adding a JavaScript carousel library for what amounts to a flex container with scroll snap is lazy engineering. The CSS approach is the actual middle ground.

I kept the implementation minimal. No custom scrollbar hiding, no momentum calculations, no touch event handlers. The browser's default behavior is fine. Just flex, overflow, and scroll snap. The user's thumb does the rest.

What I'd Skip Next Time

Honestly, I overthought this. The five-card carousel is three CSS properties and a media query. I spent more time reading UX articles about why carousels are bad than I spent implementing the one that isn't.

One practical note for anyone copying this: keep the peek visible on real devices, not just in the emulator. The half-card on the right is doing the persuasion work. If your padding or container margins eat that sliver, users lose the "there is more" cue and you are back to a single-frame carousel, the exact thing the research warns about. I checked the section on an actual phone before committing, and the first pass had margins wide enough to swallow the peek entirely.

The carousel also changed how I think about the desktop grid. Same five cards, two containers: a grid when there is room, a snap container when there is not. The content did not change at all. That is the part I keep coming back to. The research never said the content was wrong, it said the presentation forced people into missing it.

Sources

• Nielsen Norman Group, Carousel Usability [1]
• MDN, Scroll snap (glossary) [2]
• MDN, scroll-snap-type [3]