Slider

Thumbnails Slider

Thumbnail slider that pairs with a primary slider, used by `ProductImageGallery` and the `Lightbox`.

Overview

ThumbnailsSlider is the small-thumbnail strip that pairs with a primary slider. It accepts a flat thumbnails array, a required orientation (horizontal or vertical), and an optional selectedIndex controlled by the parent. When a thumbnail is clicked or hovered the component emits select with the new index, leaving the parent to update selectedIndex and drive the primary slider. Pass centered to align the active thumbnail in the middle of the strip.

It's used by ProductImageGallery for product-image navigation and inside MediaGallery for cross-image navigation.

Key Business & UX Benefits

Thumbnails on PDP help shoppers preview every angle before deciding, raising buyer confidence and lowering return rates.
The centered option keeps the active thumbnail in view as customers browse, removing the disorientation of off-screen position.
One thumbnail strip powers both product galleries and lightboxes, so the navigation feel is identical across surfaces.
Editors swap product imagery in Studio and the thumbnail strip updates automatically, with no per-product styling work.

Usage

ThumbnailsSlider Default

<ThumbnailsSlider
    :thumbnails="thumbnails"
    orientation="horizontal"
    :selected-index="activeIndex"
    centered
    @select="activeIndex = $event"
  />

Feature List

Flat thumbnails array drives the strip; required orientation prop picks horizontal or vertical layout
Parent controls the active thumbnail via selectedIndex; the component emits select with the clicked index
centered option keeps the active thumbnail in view as customers browse
Used by ProductImageGallery for PDP image navigation and inside MediaGallery for cross-image navigation
Editors swap product imagery in Studio and the thumbnail strip updates automatically with no per-product styling

API Reference

Prop	Default	Type
`thumbnails`required		`ThumbnailProps[] { media, selected }`
`orientation`required		`"vertical" \| "horizontal"`
`centered`		`boolean`
`selectedIndex`		`number`

Event	Type
`select`	`(event: "select", index: number): void`

Edit this pageorReport an issue

Swiper Scrollbar

Custom scrollbar control for sliders, sits below the slide track.

Marketplace

The Marketplace package provides components and page templates for platform and marketplace business models with multi-vendor support, discovery-driven navigation, and scalable listing structures.