ThumbnailCarousel

An image carousel with a thumbnail navigation strip. Commonly used for product galleries, media libraries, and photo collections.

Interactive Demo

Click a thumbnail, use the arrows, or drag the main image to navigate.

Usage

import { ThumbnailCarousel } from "@mantleui/react/motion";

const images = [
  { src: "https://picsum.photos/800/600?random=11", alt: "View one" },
  { src: "https://picsum.photos/800/600?random=12", alt: "View two" },
  { src: "https://picsum.photos/800/600?random=13", alt: "View three" },
];

<ThumbnailCarousel images={images} defaultValue={0} loop />

Props

Prop	Type	Default	Description
`images`	`ThumbnailImage[]`	—	Array of images. Each image has a `src` URL and optional `alt` text.
`value`	`number`	—	Controlled current slide index.
`defaultValue`	`number`	`0`	Default current slide index (uncontrolled).
`onValueChange`	`(index: number) => void`	—	Called when the current slide changes.
`autoplay`	`boolean`	`false`	Whether the carousel auto-advances.
`interval`	`number`	`3000`	Autoplay interval in ms.
`loop`	`boolean`	`true`	Whether to wrap around at edges.

images

ThumbnailImage[]

Array of images. Each image has a `src` URL and optional `alt` text.

value

number

Controlled current slide index.

defaultValue0

number

Default current slide index (uncontrolled).

onValueChange

(index: number) => void

Called when the current slide changes.

autoplayfalse

boolean

Whether the carousel auto-advances.

interval3000

number

Autoplay interval in ms.

looptrue

boolean

Whether to wrap around at edges.