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

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