First slide
A semantic article inside a slide.
Media
Carousel Item
semantic HTMLcarousel 안의 개별 슬라이드입니다.
Live example
Second slide
Use the controls to navigate.
<div data-standard-component="carousel" aria-label="Carousel item example"><div data-standard-component="carousel-item"><article><h3>First slide</h3><p>A semantic article inside a slide.</p></article></div><div data-standard-component="carousel-item"><article><h3>Second slide</h3><p>Use the controls to navigate.</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
slide 역할과 순서 레이블을 제공하고 비활성 slide는 aria-hidden으로 제외합니다.
Server template guidance
<!-- Render the semantic HTML on the server. Load enhancement JavaScript only when this interaction is needed. -->