Carousel
Cycles through multiple screens of content in the same viewport, with manual switching and autoplay support.
Basic Usage
Basic carousel
Click the dots at the bottom to switch screens; autoplay is off by default.
Initial Index
Controlled index
index specifies the current screen (starting from 0).
Autoplay
Autoplay
Setting autoplay enables autoplay, and interval controls the interval (in milliseconds).
Arrow Modes
The left/right arrows support three display modes, controlled by the arrows attribute: always (always shown) / hover (shown on hover, default) / never (hidden). Clicking an arrow switches to the previous / next screen, looping around at the ends.
Always shown (always)
Shown on hover (hover)
Hidden (never)
The default (when arrows is not specified) is the hover mode: arrows are hidden by default and smoothly fade in when the mouse hovers over or the keyboard focuses the carousel area. Not specifying arrows is equivalent to arrows="hover".
Image Carousel
Carousel items are not limited to color blocks — putting in an <img> or SVG makes an image banner.
Image banner (SVG)
Image carousel (img + autoplay)
Events
Change event
Current slide: 1
API
Attributes
| Attribute | Description | Type | Default |
|---|---|---|---|
arrows | Arrow display mode: always (always shown) / hover (shown on hover) / never (hidden) | string | hover |
autoplay | Whether to autoplay | boolean | — |
index | Current screen index (starting from 0) | string | 0 |
interval | Autoplay interval (ms) | string | 3000 |
Events
| Event | Description |
|---|---|
oas-change | Current screen changed, detail: { index } |
Slots
| Name | Description |
|---|---|
| default | — |
Parts (::part())
| Part | Description |
|---|---|
viewport / track | Viewport and sliding track |
dots / dot | Bottom indicator container and a single dot |
arrow-prev / arrow-next | Left/right arrow buttons, absolutely positioned at the vertical center of the two sides of the carousel; can be styled independently |