feat(core): new slidesPerGroupAuto feature

fixes #4168
nolimits4web · Aug 9, 2021 · 2b6f133 · 2b6f133
1 parent 1b11429
commit 2b6f133
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 8 deletions.
diff --git a/src/core/core.js b/src/core/core.js
@@ -302,9 +302,9 @@ class Swiper {
     swiper.emit('_slideClasses', updates);
   }
 
-  slidesPerViewDynamic() {
+  slidesPerViewDynamic(view = 'current', exact = false) {
     const swiper = this;
-    const { params, slides, slidesGrid, size: swiperSize, activeIndex } = swiper;
+    const { params, slides, slidesGrid, slidesSizesGrid, size: swiperSize, activeIndex } = swiper;
     let spv = 1;
     if (params.centeredSlides) {
       let slideSize = slides[activeIndex].swiperSlideSize;
@@ -324,9 +324,23 @@ class Swiper {
         }
       }
     } else {
-      for (let i = activeIndex + 1; i < slides.length; i += 1) {
-        if (slidesGrid[i] - slidesGrid[activeIndex] < swiperSize) {
-          spv += 1;
+      // eslint-disable-next-line
+      if (view === 'current') {
+        for (let i = activeIndex + 1; i < slides.length; i += 1) {
+          const slideInView = exact
+            ? slidesGrid[i] + slidesSizesGrid[i] - slidesGrid[activeIndex] < swiperSize
+            : slidesGrid[i] - slidesGrid[activeIndex] < swiperSize;
+          if (slideInView) {
+            spv += 1;
+          }
+        }
+      } else {
+        // previous
+        for (let i = activeIndex - 1; i >= 0; i -= 1) {
+          const slideInView = slidesGrid[activeIndex] - slidesGrid[i] < swiperSize;
+          if (slideInView) {
+            spv += 1;
+          }
         }
       }
     }

diff --git a/src/core/defaults.js b/src/core/defaults.js
@@ -48,6 +48,7 @@ export default {
   slidesPerView: 1,
   slidesPerGroup: 1,
   slidesPerGroupSkip: 0,
+  slidesPerGroupAuto: false,
   centeredSlides: false,
   centeredSlidesBounds: false,
   slidesOffsetBefore: 0, // in px

diff --git a/src/core/slide/slideNext.js b/src/core/slide/slideNext.js
@@ -1,9 +1,13 @@
 /* eslint no-unused-vars: "off" */
 export default function slideNext(speed = this.params.speed, runCallbacks = true, internal) {
   const swiper = this;
-  const { params, animating, enabled } = swiper;
+  const { animating, enabled, params } = swiper;
   if (!enabled) return swiper;
-  const increment = swiper.activeIndex < params.slidesPerGroupSkip ? 1 : params.slidesPerGroup;
+  let perGroup = params.slidesPerGroup;
+  if (params.slidesPerView === 'auto' && params.slidesPerGroup === 1 && params.slidesPerGroupAuto) {
+    perGroup = Math.max(swiper.slidesPerViewDynamic('current', true), 1);
+  }
+  const increment = swiper.activeIndex < params.slidesPerGroupSkip ? 1 : perGroup;
   if (params.loop) {
     if (animating && params.loopPreventsSlide) return false;
     swiper.loopFix();

diff --git a/src/core/slide/slidePrev.js b/src/core/slide/slidePrev.js
@@ -32,10 +32,18 @@ export default function slidePrev(speed = this.params.speed, runCallbacks = true
       prevSnap = snapGrid[prevSnapIndex > 0 ? prevSnapIndex - 1 : prevSnapIndex];
     }
   }
-  let prevIndex;
+  let prevIndex = 0;
   if (typeof prevSnap !== 'undefined') {
     prevIndex = slidesGrid.indexOf(prevSnap);
     if (prevIndex < 0) prevIndex = swiper.activeIndex - 1;
+    if (
+      params.slidesPerView === 'auto' &&
+      params.slidesPerGroup === 1 &&
+      params.slidesPerGroupAuto
+    ) {
+      prevIndex = prevIndex - swiper.slidesPerViewDynamic('previous', true) + 1;
+      prevIndex = Math.max(prevIndex, 0);
+    }
   }
   return swiper.slideTo(prevIndex, speed, runCallbacks, internal);
 }
diff --git a/src/types/swiper-options.d.ts b/src/types/swiper-options.d.ts
@@ -286,6 +286,13 @@ export interface SwiperOptions {
    */
   slidesPerGroupSkip?: number;
 
+  /**
+   * This param intended to be used only with `slidesPerView: 'auto' and `slidesPerGroup: 1`. When enabled, it will skip all slides in view on `.slideNext()` & `.slidePrev()` methods calls, on Navigation "buttons" clicks and in autoplay.
+   *
+   * @default false
+   */
+  slidesPerGroupAuto?: boolean;
+
   /**
    * If `true`, then active slide will be centered, not always on the left side.
    *