Carousel
A slideshow component for cycling through elements—images or slides of text.
When To Use
Use the Carousel component when you need to:
- Display multiple images, cards, or content pieces in a limited space
- Create a slideshow of images or content
- Showcase featured products or testimonials
- Present a sequence of related content or steps
- Allow users to browse through a collection of items with navigation controls
Carousels help save space while allowing users to cycle through a series of content items.
Examples
1
2
3
4
5
0 / 0
This carousel auto-advances every 3 seconds
Beautiful Landscapes
Explore stunning natural scenes from around the world
Urban Architecture
Discover fascinating buildings and city designs
Wildlife Photography
Get up close with amazing animals in their habitats
Abstract Art
Experience visual creativity in its purest form
Featured Products
Ethereal Lamp
$89.99
Designer Chair
$249.99
Ceramic Vase
$59.99
Wall Art Frame
$129.99
Modern Desk
$399.99
Props
| Prop | Type | Default |
|---|---|---|
$$typeof | symbol | - |
displayName? | string | - |
propTypes? | any | - |
| Prop | Type | Default |
|---|---|---|
$$typeof | symbol | - |
displayName? | string | - |
propTypes? | any | - |
| Prop | Type | Default |
|---|---|---|
$$typeof | symbol | - |
displayName? | string | - |
propTypes? | any | - |
| Prop | Type | Default |
|---|---|---|
$$typeof | symbol | - |
displayName? | string | - |
propTypes? | any | - |
| Prop | Type | Default |
|---|---|---|
$$typeof | symbol | - |
displayName? | string | - |
propTypes? | any | - |
| Prop | Type | Default |
|---|---|---|
$$typeof | symbol | - |
displayName? | string | - |
propTypes? | any | - |