Carousel Banner
Carousel Banner
Carousel Banner displays promotional banners in an auto-playing carousel with dots navigation and responsive configuration.
Visual Specifications
Section titled “Visual Specifications”| Property | Desktop | Mobile |
|---|---|---|
| SlidesToShow | 1 | 1 |
| Aspect Ratio | 16:9 or 21:9 | 2:1 or 3:2 |
| Dots Position | Bottom center | Bottom center |
| Spacing | 10-20px | 8-16px |
Display Modes
Section titled “Display Modes”Single static banner (no carousel needed)
Multiple banners with dots navigation
Banners link to detail pages
Configuration Options
Section titled “Configuration Options”| config | BannerConfig | Carousel settings |
| banners | CarouselBannerData[] | Banner data array |
BannerConfig
Section titled “BannerConfig”| items | number | 1 | Banners per view |
| dots | boolean | true | Show pagination |
| autoplay | boolean | true | Auto-rotate |
| autoplayTimeout | number | 5000 | Rotation duration (ms) |
CarouselBannerData
Section titled “CarouselBannerData”| image | string | Banner image URL |
| title | string | Alt text/title |
| link | string | Destination URL |
Responsive Behavior
Section titled “Responsive Behavior”| Breakpoint | Items | Dots |
|---|---|---|
| Mobile | 1 | Yes |
| Tablet | 1 | Yes |
| Desktop | 1 | Yes |
Usage Guidance
Section titled “Usage Guidance”When to use
Section titled “When to use”- Homepage hero banners
- Promotional content
- Featured products
- Marketing campaigns
Best practices
Section titled “Best practices”| ✅ Do | ❌ Don’t |
|---|---|
| Optimize image sizes | Large file loads |
| Provide alt text | Poor accessibility |
| Test autoplay behavior | Too fast/slow |
| Link to relevant content | Broken/dead links |
| Use consistent aspect ratio | Janky transitions |