React Storefront
|

ImageSwitcher

import ImageSwitcher from 'react-storefront/ImageSwitcher'

A swipeable image selector suitable for PDPs

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

thumbnailImagePropsobject

Props to apply to the thumbnail images

thumbnailPositionenum : 'bottom' |
'top' |
'left' |
'right'
'bottom'

Position of thumbnails, relative to the image viewer

imagePropsobject{}

Props to be added to the Image child components.

magnifyPropsobject

Props passed to the ReactImageMagnify element for an image when pan-to-zoom is enabled (via image zoomWidth + zoomHeight + zoomSrc).

selectedIndexnumber
notFoundSrcstring

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

reactPinchZoomPanOptionsshape : { maxScale: 3 }

Config options for the image viewer

resetSelectionWhenImagesChangebool

Set to true to always revert back to the first image when image URLs are changed. This behavior is automatically adopted when the product prop is specified.

autoplayboolfalse

If false, the auto play behavior is disabled

directionstring'incremental'

This is the auto play direction

intervalnumber3000

Delay between auto play transitions (in ms)

infiniteboolfalse

If true, scrolling past the last slide will cycle back to the first

insetnumber0

Amount of pixels to pad the slide container

slidesToShownumber1

If infinite is enabled, the number of slides to show for each index

slideSpacingnumber0

Amount of pixels of spacing between each slide

swipeableViewsPropsobject

Additional props to be passed on to the react-swipeable-views component

prevButtonPropsobject{ 'aria-label': 'previous' }

Additional props to be passed on to "previous" IconButton

nextButtonPropsobject{ 'aria-label': 'next' }

Additional props to be passed on to "next" IconButton

swipeabeViewsProps{}