Gallery

A carousel-style image gallery with previous/next navigation arrows, a slide counter, and a clickable thumbnail strip for quick navigation.

Preview

Usage

tsx

import { Gallery } from "zostel-ui";

<Gallery
  images={[
    { src: "/images/lobby.jpg", alt: "Lobby" },
    { src: "/images/dorm.jpg", alt: "Dorm Room" },
    { src: "/images/common.jpg", alt: "Common Area" },
    { src: "/images/view.jpg", alt: "Mountain View" },
  ]}
  showThumbnails
/>

Props

Prop	Type	Default	Description
`images`	`{ src: string; alt: string }[]`	—	Array of image objects with src and alt text
`showThumbnails`	`boolean`	true	Whether to show the thumbnail strip below
`autoPlay`	`boolean`	false	Enable automatic slide advancement
`interval`	`number`	5000	Auto-play interval in milliseconds
`onSlideChange`	`(index: number) => void`	—	Callback when the active slide changes
`className`	`string`	—	Additional CSS classes

images

Type: { src: string; alt: string }[]

Default: —

Array of image objects with src and alt text

showThumbnails

Type: boolean

Default: true

Whether to show the thumbnail strip below

autoPlay

Type: boolean

Default: false

Enable automatic slide advancement

interval

Type: number

Default: 5000

Auto-play interval in milliseconds

onSlideChange

Type: (index: number) => void

Default: —

Callback when the active slide changes

className

Type: string

Default: —

Additional CSS classes

Previous Booking Summary Next Hero Section