Panels · Components
Slideshow
Images you flick through: buttons, arrow keys, swipe or thumbnails.
1 / 3NK2E
Instruction-based image editing for Krea 2.
$ pnpm dlx shadcn@latest add @nynxz/slideshowUsage
It fills its container, so in a window it sizes with the window.
<Slideshow
label="Selected work"
slides={[
{ src: "/nk2e.jpg", alt: "…", title: "NK2E", caption: "…", href: "https://…" },
]}
/>Focus it (Tab) and use ← →, Home and End; swipe on touch screens. The caption area has a fixed height, so the controls never shift between slides, and the neighbouring images are prefetched.
Props
| Prop | Type | |
|---|---|---|
slides | Slide[] | src, alt, and optional title, caption, href |
label | string | names the carousel for screen readers |