Carousels are used for galleries, product images, and featured content. They can save space, but hidden items are easier to miss and moving content can be difficult to control, so the pattern should solve a real layout or browsing need.
A carousel is like a short display shelf that can rotate to show another set of objects while keeping the same counter space.
Provide obvious controls
Show previous and next controls when navigation is needed, and make the current position understandable. Controls should work by keyboard and assistive technology as well as touch. Swipe can supplement those controls, but it should not be the only way to move through the sequence.
Avoid disorienting movement
Automatic rotation can move content while someone is reading or trying to activate a control. Prefer manual movement for most interface carousels. If motion is necessary, provide a pause control, respect reduced-motion preferences, and make timing generous.
Handle responsive layouts
On small screens, cards may be partially visible to suggest more content, but the next item should not be clipped in a way that looks broken. Preserve predictable focus, announce position changes when useful, and ensure the last item and looping behavior are clear.
Frequently asked questions
Key takeaways
- Use a carousel only when its space or browsing benefit is clear.
- Keep important content discoverable without relying on hidden slides.
- Offer keyboard and visible controls in addition to gestures.
- Avoid unexpected autoplay and respect reduced-motion settings.