UI components · Data display
Carousel
Also called: Slider, Slideshow, Swiper, Image carousel, Banner slider
Shows several images or cards in turn in the same area. It can switch automatically, or users can swipe or click dots to switch.
Click “Labeled” to see what each part is called.
How to tell AI
Swap in your own content firstAdd a full-width carousel at the top of the homepage, 360px tall, with 4 banners that switch every 5 seconds and pause on hover. Put semi-transparent arrow buttons on the left and right, and small dots centered at the bottom that show the current slide and can be clicked to jump to one. Support swiping on mobile, and crop the images to keep their proportions without stretching.
Send to
01Decide
Does your content look like this?
Check both columns to confirm Carousel is what you need.
Use Carousel when
- Rotating a few equally important promos or banners at the top of a homepage
- Showing several photos of the same product on a product page
- Space is limited, and you need to rotate three to five similar cards in one area
Not sure? Upload a screenshot and page analysis will check which layout each block should use.
02Pitfalls
Common misuse
It looks like it works, but it makes things harder for users.
- 01
Switching too fast (every two or three seconds), so users get cut off before they finish
- 02
Putting the most important call-to-action button on the third slide
- 03
Images with different aspect ratios, so the whole area jumps in height on every switch
03Spot it
How to spot it
Look at the overall structure first, then check a few features you can spot at a glance.
Structure
A viewport, several slides laid out in a row, left and right arrows, and indicator dots at the bottom.
PartsClick one to highlight it in the wireframe above
04Explained
In detail
A carousel stacks several banners or cards in the same spot and shows one at a time. It moves to the next one on a timer, or lets users click the left and right arrows, tap the dots at the bottom, or swipe. Element Plus calls it Carousel, and many projects build it with the Swiper library. It's common for promo banners at the top of a homepage, multiple photos on a product page, and horizontally scrolling customer reviews.
The problem with carousels: most users only see the first slide, the later slides get very little attention, and auto-play can swap out content while someone is reading it. So don't put important info only on the second or third slide. If every slide matters, lay them out as a Card Grid instead. Auto-play should pause on hover, and the slide indicators should be easy to see.
Developer infoTerm ID, DOM cues, match priority
- Term ID
component-carousel- DOM selectors
The extension matches these CSS selectors when it inspects a page locally (tags, ARIA roles, common component library classes).
[aria-roledescription="carousel"].ant-carousel.el-carousel.arco-carousel.t-swiper.n-carousel[data-slot="carousel"].carousel.swiper.slick-slider
- Priority
- 1 · when several match at the same level, the higher priority wins
- Version
- v2 · updated Sep 29, 2026