Product Gallery
An image viewer with a thumbnail strip, usable controlled or uncontrolled.
Control it when the page has other inputs
Uncontrolled is fine for a plain gallery. Pass activeIndex when something else on the page should be able to move it — picking a colour swatch jumping to that variant's photo, for instance.
Showing image 1
Thumbnails on the left
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| images | { src: string; alt?: string }[] | The images, in display order. | |
| thumbsPosition | 'bottom' | 'left' | 'bottom' | Where the thumbnail strip sits. |
| activeIndex | number | Controlled selection. Omit to let the gallery manage its own. | |
| defaultActiveIndex | number | 0 | Initial selection when uncontrolled. |
| onActiveIndexChange | (index: number) => void | Fires when the selection changes, in both modes. |