Banner Carousel Component Demo

Showcase various usage scenarios and configuration options of Banner component

Single Banner (No Autoplay)

Single Banner

This is the only banner and will not autoplay

Two Banners (Autoplay)

<

>

Banner 1

Two banners with autoplay

Banner 2

Supports swipe gestures

Three Banners (Preview Effect)

<

>

Banner 1

Three or more banners show left/right previews

Banner 2

Hover to pause autoplay

Banner 3

Supports infinite loop

Five Banners (Full Carousel)

<

>

Football Match

Live sports broadcast

Basketball Game

Passionate showdown

Tennis Open

Top players battle

Esports Tournament

World finals

Baseball League

Playoffs started

Current Banner Index: 0

Custom Content Banner

<

>

1

Custom Style 1

Fully customized banner content

2

Custom Style 2

Freely designed with slots

3

Custom Style 3

Flexible component design

Custom Navigation Buttons

◀

▶

Banner 1

Three or more banners show left/right previews

Banner 2

Hover to pause autoplay

Banner 3

Supports infinite loop

Different Height Settings

Height 200px

<

>

Banner 1

Two banners with autoplay

Banner 2

Supports swipe gestures

Height 400px

<

>

Banner 1

Two banners with autoplay

Banner 2

Supports swipe gestures

No Indicators and Navigation Buttons

Banner 1

Three or more banners show left/right previews

Banner 2

Hover to pause autoplay

Banner 3

Supports infinite loop

Keyboard Navigation Test

Click on the Banner to focus it (a blue border will appear), then use the following keys:

←Previous

→Next

SpacePause / Resume

HomeFirst

EndLast

<

>

Football Match

Live sports broadcast

Basketball Game

Passionate showdown

Tennis Open

Top players battle

Esports Tournament

World finals

Baseball League

Playoffs started