Gallery Component
A responsive image gallery component with lightbox, thumbnails, and advanced features.
Basic Gallery
A simple gallery with default styling.
Gallery with Thumbnails
A gallery with thumbnails and advanced features.
Gallery with Auto-Playing
A gallery with auto-playing functionality.
Auto-playing gallery with 3-second interval
Gallery Props
The main gallery container component.
| Prop | Description | Type | Default |
|---|---|---|---|
| defaultIndex | The initial active image index. | number | 0 |
| thumbnailPosition | Position of the thumbnails. | "top" | "bottom" | "left" | "right" | "bottom" |
| showThumbnails | Whether to show thumbnails. | boolean | true |
| showControls | Whether to show navigation controls. | boolean | true |
| autoPlay | Whether to auto-play the gallery. | boolean | false |
| autoPlayInterval | Interval between slides in milliseconds. | number | 3000 |
| loop | Whether to loop the gallery. | boolean | true |
| onIndexChange | Callback when the active index changes. | (index: number) => void | - |
Gallery.Item
Individual gallery item component.
| Prop | Description | Type | Default |
|---|---|---|---|
| id | Unique identifier for the item. | string | - |
| src | Image source URL. | string | - |
| alt | Alternative text for the image. | string | - |
| caption | Caption text for the image. | string | - |
| thumbnail | Thumbnail image URL. Falls back to src if not provided. | string | - |