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 visualsSummer product launch
- Product image galleryStep 2 · Invite team members
- Onboarding walkthroughProduct image
- Several related stories in one reserved area3 / 3
When NOT to use it
- Hide critical content on a later slideSlide 1
- Autoplay without pause controls…
- Rotate so quickly that people cannot readFour destinations crammed into a carousel mean four swipes
- Use many slides when a list would be easier to scanAlex ChenCarousel adA carousel in a form interrupts completion
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
