Carousel
A row of images or cards that shows a few at a time and moves sideways with swipes, arrows, or pagination dots.
See it
What it is
A carousel is a sequence of panels that shares one frame, with arrows, swipes, or pagination dots moving the next panel into view. It may show one hero image at a time or a clipped row of cards. The name borrows the fairground carousel: items ride past a fixed viewing frame, and many implementations wrap from the last item back to the first.
Reach for one when the items form a small, ordered set and browsing sideways is part of the job: product photos, testimonials, featured stories, or a compact card rail on mobile. Netflix's horizontal rows are the version most people now recognise. CSS Scroll Snap gives a touch-driven carousel native scrolling and reliable resting points without rebuilding momentum in JavaScript.
Gotcha: hidden slides are easily missed, and automatic rotation makes reading and keyboard use harder. Keep the set short, expose previous and next controls, show position, and never make the carousel the only route to essential content. If it rotates automatically, provide a pause control and stop rotation while focus or a pointer is inside.
Ask AI for it
Build a responsive carousel with native horizontal scrolling and CSS 'scroll-snap-type: x mandatory'. Give every slide 'scroll-snap-align: start', lay slides out with CSS Grid grid-auto-flow: column, and add labelled Previous and Next buttons that call scrollIntoView(). Include clickable pagination dots, a visible '2 of 6' position label, keyboard-reachable slide content, and aria-live='polite' announcements only after user-initiated moves. Do not autoplay, and disable smooth scrolling under prefers-reduced-motion.