Skip to content

Carousel Banner

Carousel Banner

Carousel Banner displays promotional banners in an auto-playing carousel with dots navigation and responsive configuration.

PropertyDesktopMobile
SlidesToShow11
Aspect Ratio16:9 or 21:92:1 or 3:2
Dots PositionBottom centerBottom center
Spacing10-20px8-16px

Single static banner (no carousel needed)

Multiple banners with dots navigation

Banners link to detail pages

| config | BannerConfig | Carousel settings | | banners | CarouselBannerData[] | Banner data array |

| items | number | 1 | Banners per view | | dots | boolean | true | Show pagination | | autoplay | boolean | true | Auto-rotate | | autoplayTimeout | number | 5000 | Rotation duration (ms) |

| image | string | Banner image URL | | title | string | Alt text/title | | link | string | Destination URL |

BreakpointItemsDots
Mobile1Yes
Tablet1Yes
Desktop1Yes
  • Homepage hero banners
  • Promotional content
  • Featured products
  • Marketing campaigns
✅ Do❌ Don’t
Optimize image sizesLarge file loads
Provide alt textPoor accessibility
Test autoplay behaviorToo fast/slow
Link to relevant contentBroken/dead links
Use consistent aspect ratioJanky transitions