Slideshow
화살표와 페이지 표시로 넘겨 보는 갤러리.
- 라이브러리 전용
개요
미리보기
예시
상태
처음
Meeting-room whiteboard Handwritten notes scan Quarterly plan, slide 4 마지막
Meeting-room whiteboard Handwritten notes scan Quarterly plan, slide 4 자동 넘김
Meeting-room whiteboard Handwritten notes scan Quarterly plan, slide 4 순환
Meeting-room whiteboard Handwritten notes scan Quarterly plan, slide 4
이렇게 · 이렇게 하지 않기
- 이렇게 사용자가 직접 넘길 때만 쓰고 자동 재생은 하지 않는다. 슬라이드마다 “{n}/{total}”을 알린다.
- 이렇게 하지 않기 랜딩에는 쓰지 않는다(첫 화면은 헤드라인 하나와 버튼 하나다).
- 이렇게 하지 않기 점만 있는 페이지 표시를 쓰지 않는다. 선택 버튼은 번호와 슬라이드 이름을 가진다. 활성 표시를 폭 애니메이션으로 늘이지 않는다.
- 이렇게 21st 참고: Snap Carousel(ddoemonn — 화면 밖 슬라이드 inert, “01 · 05” 위치), Carousel(appica-dev — 화살표·점·썸네일), Image Carousel with Counter(shadcnspace — “2 / 4”), Carousel(wensity — tab 선택기). appica의 활성 점 폭 애니메이션과 youcefbnm Slideshow의 hover clip-path 전환은 버렸다.
토큰과 속성
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
label | string | 회의 첨부 이미지 | 캐러셀 영역의 접근 이름. |
slides | readonly SlideshowSlide[] | — | { id, title, content }. title은 선택 버튼 이름과 알림에 쓴다. 미리보기는 표본 3장. |
index? | number | — | 처음 보여 줄 슬라이드(0부터). |
autoplay? | boolean | false | 기본 꺼짐. 켜도 hover·초점 중에는 멈추고, 동작 줄이기에서는 무시하며, 멈춤 버튼이 생긴다. |
loop? | boolean | false | 마지막에서 처음으로 돌아갈지. 기본은 순환 없음(끝 버튼 aria-disabled). |
onIndexChange?: (index: number) => void | — | — | 슬라이드가 바뀔 때(수동·자동 모두). |
announce() — a11y/announce.ts | — | — | 공용 announce()(LiveAnnouncer, polite). 수동 전환만 “2/3, 제목”을 알린다. 자동재생 중에는 알리지 않는다. |
| 그 밖의 속성 | — | — | id, aria-* 등 네이티브 section 속성은 그대로 전달된다. className·style·children은 받지 않는다. |
접근성
키보드: 이전·다음·선택 버튼은 Tab. 슬라이드 영역이나 버튼에 초점이 있을 때 ←→. 스와이프(터치)는 보조 수단.
- <section aria-roledescription="carousel">, 슬라이드 role="group" aria-roledescription="slide" aria-label="1/3". 화면 밖 슬라이드는 inert라 안쪽 링크가 Tab에 걸리지 않는다.
- 슬라이드를 바꿔도 초점은 누른 버튼에 남는다. 현재 선택 버튼은 aria-current + 채움 + 밑줄.
- 모션: move 가로 이동. reduce면 즉시 교체. 자동재생은 reduce에서 무시한다.