SSR first
Meaningful HTML arrives before JavaScript.
Media
Carousel
semantic HTML여러 콘텐츠 슬라이드를 순서대로 탐색합니다.
Live example
Accessible
Keyboard and screen reader contracts are tested.
No build
Native modules run directly in the browser.
<div data-standard-component="carousel" aria-label="Release highlights"><div data-standard-component="carousel-item"><article><h3>SSR first</h3><p>Meaningful HTML arrives before JavaScript.</p></article></div><div data-standard-component="carousel-item"><article><h3>Accessible</h3><p>Keyboard and screen reader contracts are tested.</p></article></div><div data-standard-component="carousel-item"><article><h3>No build</h3><p>Native modules run directly in the browser.</p></article></div></div>Variants and sizes
The pattern inherits theme and density tokens. Use compact, comfortable, or roomy density when the surrounding screen requires it.
compactcomfortableroomy
Public API
| Contract | Value |
|---|---|
| Implementation | semantic HTML |
| Status | stable |
| License | free |
| Since | 0.4 |
| HTML contract | Native HTML elements and attributes |
| Events | Native browser events |
Accessibility
region과 carousel 이름을 제공하고 현재 slide만 노출하며 중첩 입력의 방향키를 가로채지 않습니다.
Server template guidance
<!-- Render the semantic HTML on the server. Load enhancement JavaScript only when this interaction is needed. -->