Gallery

A carousel that shows one slide at a time, with thumbnails that pick one. Built on Carousel, so swiping, snapping and keyboard scrolling are the platform's; the thumbnails follow whichever slide is in view, however it got there.

import { Gallery } from "@evolve-storefront/ui/gallery";

Preview

DefaultOpen in Storybook ↗

Usage

Five images. Pick a thumbnail, or scroll the slides: the other follows.

<Gallery label={product.name}>
  <GallerySlides previousLabel={t("previous")} nextLabel={t("next")}>
    {images.map((image, index) => (
      <GallerySlide key={image.url}>
        <Image src={image.url} alt={image.alt ?? ""} loading={index === 0 ? "eager" : "lazy"} />
      </GallerySlide>
    ))}
  </GallerySlides>
  <GalleryThumbnails>
    {images.map((image, index) => (
      <GalleryThumbnail key={image.url} index={index} label={t("show-image", { number: index + 1 })}>
        <Image src={image.url} alt="" width={80} height={80} />
      </GalleryThumbnail>
    ))}
  </GalleryThumbnails>
</Gallery>;

Props

Prop	Type	Description
label	string	The gallery's accessible name, e.g. the product's name.

Any other props go to the root element, like on a plain HTML element.

Change the layout

Pass children to Gallery to arrange its parts yourself. Every part is exported from @evolve-storefront/ui/gallery.

<Gallery label={product.name}>
  <GallerySlides previousLabel={t("previous")} nextLabel={t("next")}>
    {images.map((image, index) => (
      <GallerySlide key={image.url}>
        <Image src={image.url} alt={image.alt ?? ""} loading={index === 0 ? "eager" : "lazy"} />
      </GallerySlide>
    ))}
  </GallerySlides>
  <GalleryThumbnails>
    {images.map((image, index) => (
      <GalleryThumbnail key={image.url} index={index} label={t("show-image", { number: index + 1 })}>
        <Image src={image.url} alt="" width={80} height={80} />
      </GalleryThumbnail>
    ))}
  </GalleryThumbnails>
</Gallery>;

GalleryGridThe images as a list: two columns in a container from @md, and below that a row that swipes one image at a time, with a position indicator.

Prop	Type	Description
label	string	The gallery's accessible name, e.g. the product's name.
positionLabel?	((position: number, count: number) => string)	The position indicator's spoken text. Defaults to "Image {position} of {count}".

Any other props go to the root element, like on a plain HTML element.

GalleryGridItemOne image of a GalleryGrid: a cell of the grid, or a full-width stop of the row.

No props of its own.

GallerySlideOne slide, as wide as the gallery.

No props of its own.

GallerySlidesThe slides and the previous/next controls, which centre on them.

Prop	Type	Description
previousLabel?	string	Accessible name of the previous control. Defaults to English.
nextLabel?	string	Accessible name of the next control. Defaults to English.

Any other props go to the root element, like on a plain HTML element.

GalleryThumbnailBrings slide index into view.

Prop	Type	Description
index	number	The slide this thumbnail shows.
label?	string	Accessible name. Defaults to "Show image {index + 1}"; pass a translated one.

Any other props go to the root element, like on a plain HTML element.

GalleryThumbnailsThe strip of thumbnails.

No props of its own.