Carousel
UI ComponentsA slideshow component that displays multiple items (images, cards, content) in a horizontal sequence, allowing users to navigate through them one at a time.
Visual Examples
Example 1
Example 2
Example 3
Visual examples for Carousel coming soon.
How It Works in Apps/Websites
Carousels show one item (or a few) at a time from a larger set, with navigation to see more. Users navigate via arrows, dots, swipe gestures, or auto-play. Only visible items are shown; others are hidden off-screen. Useful for showcasing multiple items in limited space. Can be infinite (loops) or finite.
How AI Interprets This Term
When you say 'carousel', AI expects: a horizontal container showing 1-4 items at once, with left/right arrow buttons on sides and dot indicators below. Items slide horizontally when navigating. May have partial visibility of next/previous items at edges.
Prompt Examples
Copy-paste these prompts to use in your AI tools.
Create an image carousel with navigation arrows and dots
Design a product carousel: shows 3 cards at once on desktop (1 on mobile), left/right circular arrow buttons, dot indicators, smooth slide animation (0.4s ease), peek of next/previous cards visible at edges. Auto-play every 5 seconds with pause on hover.
Show a full-width hero carousel vs a multi-item product carousel vs a testimonial carousel
Compare With
Related or contrasting terms to help you understand the differences.
Variants & States
Variants
States
Usage Guidelines
When to Use
- •Image galleries
- •Product showcases
- •Testimonials
- •Featured content sections
When NOT to Use
- •Critical content (users miss slides)
- •Too many items (use grid)
- •Primary navigation
Related Terms
Hero Section
The large, prominent section at the top of a webpage that introduces the main message, often featuring a headline, subheadline, CTA, and visual media.
Slider
An input control that allows users to select a value from a range by dragging a thumb along a horizontal track.