Slider

Interactive documentation for the slider component. Change gallery mode in the playground, inspect synced Slider and Viewer behavior, and copy the generated example.

Preview

Current item

{
  "src": "https://picsum.photos/id/237/1400/900",
  "viewerSrc": "https://picsum.photos/id/237/1400/900",
  "alt": "Photo 1"
}

Code

<Slider
  :images="sliderItems"
  v-model:current="current"
  fallback-src="https://placehold.co/1400x900?text=Preview"
  @select="handleSelect"
/>

Synced gallery

The same active index is used by Slider and Viewer. Click any slide to open the matching item in Viewer.

Examples

Common slider configurations for image and video galleries.

Photo gallery

Video previews

Slider receives YouTube preview images. Viewer receives matching YouTube video URLs.

Props

This table matches the current SliderProps interface.

Prop	Type	Required	Default	Description
images	SliderItem[]	Optional	[]	Array of slider items rendered inside the carousel.
src	string	Required	—	Main slide source URL. Supports image URLs and video URLs used by Viewer.
alt	string	Optional	—	Accessible alternative text for the image element.
id	string	Optional	—	Optional unique identifier for tracking, rendering keys, or external integrations.
current	number	Optional	0	Current active slide index. Supports v-model:current synchronization.
fallbackSrc	string	Optional	''	Fallback image source used when the original image fails to load.