fix(storefront): BCTHEME-297 Cornerstone 4.11.0 - Product Image Carou…

…sel Becomes Unresponsive on Product Page (#1879) Co-authored-by: BC-tymurbiedukhin <66319629+BC-tymurbiedukhin@users.noreply.github.com>
bigcommerce · Oct 21, 2020 · 2c91a9a · 2c91a9a
1 parent 66d4149
commit 2c91a9a
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 3 deletions.
diff --git 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
@@ -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
             ? () => (