Gallery

Large preview with a thumbnail strip and a photo counter. The size prop (xs, sm, md, lg, xl) sets the thumbnail size.

Import

Vue

import { UiGallery } from '@ziyarago/ui/vue'

Controlled index

3 / 4

Vue

<UiGallery
  :images="['/3d/kaaba.png', '/3d/hotel.png', '/3d/mosque.png', '/3d/tour360.png']"
  :index="2"
  alt="Hotel photos"
 />

Empty

Vue

<UiGallery :images="[]" alt="No photos" />

Hotel photos

1 / 4

Vue

<UiGallery
  :images="['/3d/kaaba.png', '/3d/hotel.png', '/3d/mosque.png', '/3d/tour360.png']"
  alt="Hotel photos"
 />

Sizes

1 / 4

Vue

<UiGallery
  :images="['/3d/kaaba.png', '/3d/hotel.png', '/3d/mosque.png', '/3d/tour360.png']"
  alt="Hotel photos"
  size="xs"
 />

<UiGallery
  :images="['/3d/kaaba.png', '/3d/hotel.png', '/3d/mosque.png', '/3d/tour360.png']"
  alt="Hotel photos"
  size="sm"
 />

<UiGallery
  :images="['/3d/kaaba.png', '/3d/hotel.png', '/3d/mosque.png', '/3d/tour360.png']"
  alt="Hotel photos"
  size="md"
 />

<UiGallery
  :images="['/3d/kaaba.png', '/3d/hotel.png', '/3d/mosque.png', '/3d/tour360.png']"
  alt="Hotel photos"
  size="lg"
 />

<UiGallery
  :images="['/3d/kaaba.png', '/3d/hotel.png', '/3d/mosque.png', '/3d/tour360.png']"
  alt="Hotel photos"
  size="xl"
 />

API reference

Large image with a counter and a thumbnail strip for browsing a set of photos.

Props

PropType and valuesDefaultDescription

imagesrequiredstring[][]Image URLs. The first one is shown initially; clicking a thumbnail switches the main image.

altstring''Accessible description of the main image.

indexnumber—Controlled active image index. When set, the gallery only changes image when you update it from onChange; when omitted it keeps its own state starting at 0.

labels{ photo?: string }'{ photo: 'Photo' }'Override the thumbnail aria-label prefix.

sizexssmmdlgxl'md'Thumbnail strip size.

Events

Vue: @name. React: onName.

changeCalled with the new image index when a thumbnail is clicked.

Notes

An empty or missing images array renders an empty frame (no counter, no thumbnails). Invalid index values are clamped to the available range.