Carousel
Carousels display a collection of items that can be scrolled on and off the screen. They showcase related content in a limited space with horizontal navigation.
Live Preview
Featured Products
New Arrival
Ayurvedic Face Serum
Discover the power of ancient botanicals
Brand Properties
| Property | Type | Material Default | HoB Value | TAE Value |
|---|---|---|---|---|
| itemBorderRadius | string | 28px | 12px | 12px |
| itemGap | string | 8px | 16px | 16px |
| indicatorActiveColor | color | #6750A4 | #038012 | #1A5129 |
| indicatorInactiveColor | color | #CAC4D0 | #999999 (40%) | #8A8A8A (40%) |
| indicatorSize | string | 8px | 8px | 8px |
| indicatorActiveWidth | string | 24px | 24px | 24px |
| arrowButtonSize | string | 40px | 40px | 40px |
| arrowButtonBackground | color | #FFFFFF | #FFFFFF | #FFFFFF |
Carousel Types
- Multi-browse - Shows multiple items at once, allows scrolling through collection
- Hero - Features one prominent item at a time with navigation controls
- Uncontained - Items extend beyond the carousel container edges
- Contained - All items stay within the visible container area
Usage Guidelines
- Use carousels to showcase related content in a limited horizontal space
- Include visual indicators to show total items and current position
- Support both swipe gestures and button navigation
- Ensure touch targets are large enough for mobile interaction
- Avoid auto-advancing carousels or provide controls to pause
- Consider accessibility - provide keyboard navigation and screen reader support