React Storefront
|

ImageSwitcher

A swipeable image selector suitable for PDPs

Import
import ImageSwitcher from 'react-storefront/ImageSwitcher'

Props

NameTypeDefaultDescription
productobject

If specified, then the image_switched analytics event will be fired when an image is selected and the product's images and thumbnails will automatically be displayed.

imagesarrayOf : union : string |
custom
[]

An array of (URL or image object) for the full size images

thumbnailsunion : bool |
arrayOf
[]

An array of thumbnails to display below the main image. You can also specify false to hide the thumbnails entirely.

arrowsbooltrue

Display left/right arrows for navigating through images

indicatorsboolfalse

Display indicator dots at the bottom of the component

thumbnailsTitlestring

Optional title for thumbnails block

viewerThumbnailsOnlyboolfalse
loadingThumbnailPropsobject{}

Props to apply to the Image component used to display the product thumbnail while the product data is loading

imagePropsobject{}

Props to be added to the Image child components.

selectedIndexnumber
notFoundSrcstring

The URL of image to load if an image fails to load

reactPinchZoomPanOptionsshape : { maxScale: 3 }

Config options for the image viewer

CSS API

You can override all the class names injected by Moov-PWA thanks to the classes property. This property accepts the following keys:

  • root
  • swipeWrap
  • imageWrap
  • thumbsTitle
  • productThumb
  • thumbs
  • thumbnail
  • activeThumbs
  • selected
  • arrows
  • arrow
  • leftArrow
  • rightArrow
  • icon
  • dot
  • dotSelected
  • dots
  • viewerToggle
  • viewerActive
  • viewerOverlay
  • viewerOverlayActive
  • tabsRowRoot
  • tabScroller
  • indicator
  • mask