ProductGallery

The ProductGallery container displays a gallery of product images on the product details page.

ProductGallery configurations

The ProductGallery container provides the following configuration options:

controls	string	No	Type of controls for navigation. Options are thumbnailsRow, thumbnailsColumn, dots, or null. Defaults to dots.
loop	boolean	No	Whether to loop the images in the carousel. Defaults to true.
peak	boolean	No	Whether to enable the peak feature. Defaults to false.
gap	string	No	Gap size between images. Options are small, medium, large, or null. Defaults to null.
arrows	boolean	No	Whether to display navigation arrows. Defaults to true.
imageParams	object	No	Parameters for resolving image URLs.
thumbnailParams	object	No	Parameters for resolving thumbnail URLs.
zoom	object or boolean	No	Configuration for the zoom feature. If an object, it can have a closeButton property to show a close button. Defaults to false.

Example

The following example demonstrates how to configure the ProductGallery container:

return productRenderer.render(ProductDetails, {
  controls: 'thumbnailsRow',
  loop: true,
  peak: false,
  gap: 'medium',
  arrows: true,
  imageParams: {
    width: 800,
    height: 800,
  },
  thumbnailParams: {
    width: 150,
    height: 150,
  },
  zoom: {
    closeButton: true,
  },
});