diff --git a/CHANGELOG.md b/CHANGELOG.md index 9505a3f6aa..e2640a4ef4 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,7 @@ # Changelog ## Draft +- Fixed Product Image Carousel Becomes Responsiveness on Product Page. [#1879](https://github.com/bigcommerce/cornerstone/pull/1879) - Move phrases and static strings to en.json for improving translation customizing. [#1850](https://github.com/bigcommerce/cornerstone/pull/1850) - Update carousel images to improve LCP indicator from Lighthouse performance report. [#1876](https://github.com/bigcommerce/cornerstone/pull/1876) - Add aria label with price to Product Grid Item. [#1875](https://github.com/bigcommerce/cornerstone/pull/1875) diff --git a/assets/js/theme/common/carousel.js b/assets/js/theme/common/carousel.js index 23b7dbd268..4e75836b4c 100644 --- a/assets/js/theme/common/carousel.js +++ b/assets/js/theme/common/carousel.js @@ -58,13 +58,18 @@ export default function () { if ($carouselCollection.length === 0) return; - $carouselCollection.on('init', onCarouselChange); - $carouselCollection.on('afterChange', onCarouselChange); - $carouselCollection.each((index, carousel) => { // getting element using find to pass jest test const $carousel = $(document).find(carousel); + if ($carousel.hasClass('productView-thumbnails')) { + $carousel.slick(); + return; + } + + $carousel.on('init', onCarouselChange); + $carousel.on('afterChange', onCarouselChange); + const isMultipleSlides = $carousel.children().length > 1; const customPaging = isMultipleSlides ? () => (