Carousels
Carousels are sets of slides sharing one region of the page, with controls that move through them a view at a time. The two here differ by axis rather than decoration: a horizontal row showing three slides at desktop width, two at tablet and one on a phone, and a vertical column stepped with up and down buttons. Both wrap, so the last slide leads back to the first.
Wrapping is a decision worth making on purpose. A loop suits a gallery where no image is first or last, and it misleads in anything ranked, where reaching the end was information the reader wanted. The larger cost is attention. Every slide other than the one on screen sits behind a control the reader has no particular reason to press, which makes a carousel a good home for browsing and a poor home for anything that has to be read.
Horizontal carousel
Best for
Galleries, product shots, testimonials: a row you page through
Anatomy
Previous / next buttons · square slides, three per view, two on tablet, one on mobile · wrap-around
Vertical carousel
Best for
Feeds, stacked media, story-style browsing: a column you step through
Anatomy
Up / down buttons · three wide slides · wrap-around
Using Carousels
Reach for it when
- A gallery where the images are the point, and looking at them is the task
- Testimonials or logos, where no single item has to be seen
- A narrow column where stacking the items would push the page down
- Browsing with no fixed end, where a loop is the natural shape
Reach for something else when
- A hero pushing several messages: pick one, since each message after the first hides behind a control nobody presses
- Content that has to be found or searched: a grid or list puts it all on the page at once
- Steps in a process: a stepper shows position and lets someone go back deliberately
Where it shows up
Product image gallery
A listing page showing several shots of the same item. The reader is already there to look at pictures, so paging through them is the task rather than an obstacle placed in front of one.
Related items row
A strip of recommendations under a product or article, three across at desktop width and one on a phone. Nothing in the row has to be seen, which is what makes hiding most of it acceptable.
Customer quotes
A testimonial block on a marketing page. Each quote stands alone and any one of them would do, so no reading order is lost by showing one at a time and looping back to the start.
Vertical media feed
A narrow column beside a main article stepping through images or short clips, where stacking them would push everything below it off the first screen entirely.
Questions
Are carousels bad for accessibility?
Not inherently, but they carry obligations that are easy to skip. Previous and next must be real buttons with labels, every slide must be reachable without a pointer, and slides that are off screen should not be focus stops, or a keyboard user ends up tabbing through content nobody can see. If it advances on its own, a visible control to stop it is required.
Should a carousel advance automatically?
Usually not. Auto-advance moves content out from under someone still reading it, and it competes with the scrolling the page already has. If a carousel does advance on its own, it should stop on hover, on focus and on any manual interaction, and it needs a visible pause control that stays put rather than appearing only when the pointer is near.
Be first in,
and 10% off.
Join the list and we’ll email you the moment the code library and MCP server go live: with a 10% discount code to use whenever you decide to buy.
Carousels
Carousels are sets of slides sharing one region of the page, with controls that move through them a view at a time. The two here differ by axis rather than decoration: a horizontal row showing three slides at desktop width, two at tablet and one on a phone, and a vertical column stepped with up and down buttons. Both wrap, so the last slide leads back to the first.
Wrapping is a decision worth making on purpose. A loop suits a gallery where no image is first or last, and it misleads in anything ranked, where reaching the end was information the reader wanted. The larger cost is attention. Every slide other than the one on screen sits behind a control the reader has no particular reason to press, which makes a carousel a good home for browsing and a poor home for anything that has to be read.
Horizontal carousel
Best for
Galleries, product shots, testimonials: a row you page through
Anatomy
Previous / next buttons · square slides, three per view, two on tablet, one on mobile · wrap-around
Vertical carousel
Best for
Feeds, stacked media, story-style browsing: a column you step through
Anatomy
Up / down buttons · three wide slides · wrap-around
Using Carousels
Reach for it when
- A gallery where the images are the point, and looking at them is the task
- Testimonials or logos, where no single item has to be seen
- A narrow column where stacking the items would push the page down
- Browsing with no fixed end, where a loop is the natural shape
Reach for something else when
- A hero pushing several messages: pick one, since each message after the first hides behind a control nobody presses
- Content that has to be found or searched: a grid or list puts it all on the page at once
- Steps in a process: a stepper shows position and lets someone go back deliberately
Where it shows up
Product image gallery
A listing page showing several shots of the same item. The reader is already there to look at pictures, so paging through them is the task rather than an obstacle placed in front of one.
Related items row
A strip of recommendations under a product or article, three across at desktop width and one on a phone. Nothing in the row has to be seen, which is what makes hiding most of it acceptable.
Customer quotes
A testimonial block on a marketing page. Each quote stands alone and any one of them would do, so no reading order is lost by showing one at a time and looping back to the start.
Vertical media feed
A narrow column beside a main article stepping through images or short clips, where stacking them would push everything below it off the first screen entirely.
Questions
Are carousels bad for accessibility?
Not inherently, but they carry obligations that are easy to skip. Previous and next must be real buttons with labels, every slide must be reachable without a pointer, and slides that are off screen should not be focus stops, or a keyboard user ends up tabbing through content nobody can see. If it advances on its own, a visible control to stop it is required.
Should a carousel advance automatically?
Usually not. Auto-advance moves content out from under someone still reading it, and it competes with the scrolling the page already has. If a carousel does advance on its own, it should stop on hover, on focus and on any manual interaction, and it needs a visible pause control that stays put rather than appearing only when the pointer is near.
Related blocks
All blocksBe first in, and 10% off.
Join the list and we’ll email you the moment the code library and MCP server go live: with a 10% discount code to use whenever you decide to buy.