Skip to main content

CaProductGallery

The product page gallery

SASS-path: ./styles/components/molecules/ca-product-gallery.scss

Props

NameDescriptionTypeRequiredDefault
imagesArray of the products image filenamesArraytrue-
galleryModeGallery mode'slider', 'plain'falseslider
hasOverlayUse overlayBooleanfalsetrue
altThe alt text for the product imagesStringtrue-
arrowIconNameFirst part of icon name for the arrows. Will add '-left', '-right', '-up' or '-down' as fittingStringfalsechevron
showGalleryThumbnailsDisplay the gallery thumbnails or notBooleanfalsetrue
thumbnailModeThumbnail mode'slider', 'grid'falseslider
showDotsDisplay dots or notBooleanfalsetrue
campaignsTo show campaign badge on imageArray / Booleanfalsefalse
mainImageSizesSizes attribute for main imageStringfalse(min-width: 1360px) 510px, (min-width: 1024px) 38vw, (min-width: 768px) 51vw, 70vw
thumbnailSizesSizes attribute for thumbnail imageStringfalse(min-width: 1360px) 255px, (min-width: 1024px) 19vw, (min-width: 768px) 25.5vw, 35vw

Events

Event NameDescriptionParameters
close-modal--

Methods

MethodDescriptionParameters
slideToIndexSlide to specific imageindex (Number)