getActiveSlideIdxAndSlidesQuantity updated

assets/js/theme/common/carousel/index.js

@@ -19,11 +19,12 @@ import {
  * @returns {Object}
  */
 const extractSlidesDetails = ({
-    slideCount, currentSlide, options: { slidesToScroll },
+    slideCount, $slides, options: { slidesToShow, slidesToScroll },
 }) => getActiveSlideIdxAndSlidesQuantity(
-    currentSlide,
     slideCount,
+    slidesToShow,
     slidesToScroll,
+    $slides,
 );
 
 export const onCarouselClick = ({

assets/js/theme/common/carousel/utils/getActiveSlideIdxAndSlidesQuantity.js

@@ -1,7 +1,25 @@
-export default (currentSlide, slideCount, slidesToScroll) => (
+export default (slideCount, slidesToShow, slidesToScroll, $slides) => {
+    const lastVisibleIdx = $slides.get().reduce((acc, curr, idx) => {
+         if ($(curr).hasClass('slick-active')) return idx;
+         return acc;
+    }, -1);
+
+    let activeSlideIdx;
+    let slidesQuantity;
+
+    activeSlideIdx = lastVisibleIdx < slidesToShow
+        ? 0
+        : Math.ceil((lastVisibleIdx + 1 - slidesToShow) / slidesToScroll);
+
+    slidesQuantity = slideCount === 0
+        ? 0
+        : slideCount <= slidesToShow
+        ? 1
+        : Math.ceil((slideCount - slidesToShow) / slidesToScroll) + 1;
+
     // FYI - one slide can contain several card items for product carousel
-    {
-        activeSlideIdx: Math.ceil(currentSlide / slidesToScroll),
-        slidesQuantity: Math.ceil(slideCount / slidesToScroll),
-    }
-);
+    return {
+        activeSlideIdx,
+        slidesQuantity,
+    };
+};