Carousel
You might say
I want several hero images to rotate automatically, with left and right arrows too.
Show several panels one at a time in the same spaceA carousel often appears in promotional banners and onboarding, but later slides are easy to miss. Do not place essential information only inside it. If it moves automatically, let people pause it and provide clear controls and position indicators.
When to use it
- A small set of promotional visuals
- Product image gallery
- Onboarding walkthrough
- Several related stories in one reserved area
When NOT to use it
- Hide critical content on a later slide
- Autoplay without pause controls
- Rotate so quickly that people cannot read
- Use many slides when a list would be easier to scan
Anatomy
‹›
Container for the entire carousel area
Moves to the previous or next slide
The content in each carousel item
Shows which slide is active and how many slides there are
Variants
Slide
‹
›
For the default pattern: move left and right through several images
Fade
For a full-width banner with a softer transition
Card
When the edges of adjacent slides should hint that users can browse further
Typical use cases
Homepage banner
Product gallery
Step 2 · Invite team members
Invite colleagues to join the project to view and edit together
Feature tour
Cream Ceramic Cat Bowl with Heightened Neck Guard
¥49.00
20% off for a limited time
Customer stories
Discover
Further reading