feat: reworked loop mode

nolimits4web · Sep 29, 2023 · 2a99dbd · 2a99dbd
1 parent 703ede6
commit 2a99dbd
Show file tree

Hide file tree

Showing 8 changed files with 76 additions and 38 deletions.
diff --git a/playground/core/index.html b/playground/core/index.html
@@ -57,6 +57,11 @@
       justify-content: center;
       font-size: 22px;
       background: #fff;
+      width: 100px;
+    }
+
+    .swiper-slide:not(.swiper-slide-active) {
+      opacity: 0.75;
     }
   </style>
   <script type="module">
@@ -68,8 +73,9 @@
 
     window.swiper = new Swiper(".swiper", {
       spaceBetween: 20,
-      slidesPerView: 3,
-      centeredSlides: true,
+      slidesPerView: 2,
+      slidesPerGroup: 2,
+      // centeredSlides: true,
       loop: true,
       createElements: true,
       pagination: {

diff --git a/src/core/events/onTouchEnd.mjs b/src/core/events/onTouchEnd.mjs
@@ -25,6 +25,7 @@ export default function onTouchEnd(event) {
       return;
     }
   }
+
   data.pointerId = null;
   data.touchId = null;
   const { params, touches, rtlTranslate: rtl, slidesGrid, enabled } = swiper;
@@ -43,6 +44,7 @@ export default function onTouchEnd(event) {
     data.startMoving = false;
     return;
   }
+
   // Return Grab Cursor
   if (
     params.grabCursor &&
@@ -71,18 +73,20 @@ export default function onTouchEnd(event) {
   nextTick(() => {
     if (!swiper.destroyed) swiper.allowClick = true;
   });
+
   if (
     !data.isTouched ||
     !data.isMoved ||
     !swiper.swipeDirection ||
-    touches.diff === 0 ||
+    (touches.diff === 0 && !data.loopSwapReset) ||
     (data.currentTranslate === data.startTranslate && !data.loopSwapReset)
   ) {
     data.isTouched = false;
     data.isMoved = false;
     data.startMoving = false;
     return;
   }
+
   data.isTouched = false;
   data.isMoved = false;
   data.startMoving = false;

diff --git a/src/core/events/onTouchMove.mjs b/src/core/events/onTouchMove.mjs
@@ -182,6 +182,7 @@ export default function onTouchMove(event) {
   }
   let loopFixed;
   let time = new Date().getTime();
+
   if (
     data.isMoved &&
     data.allowThresholdMove &&

diff --git a/src/core/loop/loopCreate.mjs b/src/core/loop/loopCreate.mjs
@@ -11,5 +11,15 @@ export default function loopCreate(slideRealIndex) {
     el.setAttribute('data-swiper-slide-index', index);
   });
 
+  if (swiper.slides.length % params.slidesPerGroup !== 0) {
+    try {
+      console.warn(
+        'Swiper Loop Warning: The number of slides is not even to slidesPerGroup, loop mode may not function properly. You need to add more slides (or make duplicates, or empty slides)',
+      );
+    } catch (err) {
+      // err
+    }
+  }
+
   swiper.loopFix({ slideRealIndex, direction: params.centeredSlides ? undefined : 'next' });
 }
diff --git a/src/core/loop/loopFix.mjs b/src/core/loop/loopFix.mjs
@@ -48,7 +48,10 @@ export default function loopFix({
 
   if (swiper.slides.length < slidesPerView + loopedSlides) {
     try {
-      console.warn('Swiper: amount of slides is insufficient for loop mode, it will be disabled');
+      console.warn(
+        'Swiper Loop Warning: The number of slides is not enough for loop mode, it will be disabled and not function properly. You need to add more slides (or make duplicates) or lower the values of slidesPerView and slidesPerGroup parameters',
+      );
+      return;
     } catch (err) {
       // err
     }
@@ -96,6 +99,7 @@ export default function loopFix({
   if (isPrev) {
     prependSlidesIndexes.forEach((index) => {
       swiper.slides[index].swiperLoopMoveDOM = true;
+
       slidesEl.prepend(swiper.slides[index]);
       swiper.slides[index].swiperLoopMoveDOM = false;
     });
@@ -115,7 +119,6 @@ export default function loopFix({
   if (params.watchSlidesProgress) {
     swiper.updateSlidesOffset();
   }
-
   if (slideTo) {
     if (prependSlidesIndexes.length > 0 && isPrev) {
       if (typeof slideRealIndex === 'undefined') {
@@ -134,7 +137,7 @@ export default function loopFix({
         }
       } else {
         if (setTranslate) {
-          swiper.slideToLoop(slideRealIndex, 0, false, true);
+          swiper.slideTo(swiper.activeIndex + prependSlidesIndexes.length, 0, false, true);
           swiper.touchEventsData.currentTranslate = swiper.translate;
         }
       }
@@ -154,7 +157,7 @@ export default function loopFix({
           }
         }
       } else {
-        swiper.slideToLoop(slideRealIndex, 0, false, true);
+        swiper.slideTo(swiper.activeIndex - appendSlidesIndexes.length, 0, false, true);
       }
     }
   }

diff --git a/src/core/slide/slideToLoop.mjs b/src/core/slide/slideToLoop.mjs
@@ -17,6 +17,40 @@ export default function slideToLoop(
       // eslint-disable-next-line
       newIndex = newIndex + swiper.virtual.slidesBefore;
     } else {
+      const targetSlideIndex = swiper.getSlideIndexByData(newIndex);
+      const slides = swiper.slides.length;
+      const { centeredSlides } = swiper.params;
+      let slidesPerView = swiper.params.slidesPerView;
+      if (slidesPerView === 'auto') {
+        slidesPerView = swiper.slidesPerViewDynamic();
+      } else {
+        slidesPerView = Math.ceil(parseFloat(swiper.params.slidesPerView, 10));
+        if (centeredSlides && slidesPerView % 2 === 0) {
+          slidesPerView = slidesPerView + 1;
+        }
+      }
+      let needLoopFix = slides - targetSlideIndex < slidesPerView;
+      if (centeredSlides) {
+        needLoopFix = needLoopFix || targetSlideIndex < Math.ceil(slidesPerView / 2);
+      }
+      if (needLoopFix) {
+        const direction = centeredSlides
+          ? targetSlideIndex < swiper.activeIndex
+            ? 'prev'
+            : 'next'
+          : targetSlideIndex - swiper.activeIndex - 1 < swiper.params.slidesPerView
+          ? 'next'
+          : 'prev';
+
+        swiper.loopFix({
+          direction,
+          slideTo: true,
+          activeSlideIndex:
+            direction === 'next' ? targetSlideIndex + 1 : targetSlideIndex - slides + 1,
+          slideRealIndex: direction === 'next' ? swiper.realIndex : undefined,
+        });
+      }
+
       newIndex = swiper.getSlideIndexByData(newIndex);
     }
   }

diff --git a/src/core/update/updateActiveIndex.mjs b/src/core/update/updateActiveIndex.mjs
@@ -57,16 +57,23 @@ export default function updateActiveIndex(newActiveIndex) {
     snapIndex = skip + Math.floor((activeIndex - skip) / params.slidesPerGroup);
   }
   if (snapIndex >= snapGrid.length) snapIndex = snapGrid.length - 1;
-  if (activeIndex === previousIndex) {
+  if (activeIndex === previousIndex && !swiper.params.loop) {
     if (snapIndex !== previousSnapIndex) {
       swiper.snapIndex = snapIndex;
       swiper.emit('snapIndexChange');
     }
-    if (swiper.params.loop && swiper.virtual && swiper.params.virtual.enabled) {
-      swiper.realIndex = getVirtualRealIndex(activeIndex);
-    }
     return;
   }
+  if (
+    activeIndex === previousIndex &&
+    swiper.params.loop &&
+    swiper.virtual &&
+    swiper.params.virtual.enabled
+  ) {
+    swiper.realIndex = getVirtualRealIndex(activeIndex);
+    return;
+  }
+
   // Get real index
   let realIndex;
   if (swiper.virtual && params.virtual.enabled && params.loop) {

diff --git a/src/modules/pagination/pagination.mjs b/src/modules/pagination/pagination.mjs
@@ -76,33 +76,6 @@ export default function Pagination({ swiper, extendParams, on, emit }) {
     const index = elementIndex(bulletEl) * swiper.params.slidesPerGroup;
     if (swiper.params.loop) {
       if (swiper.realIndex === index) return;
-      const realIndex = swiper.realIndex;
-      const newSlideIndex = swiper.getSlideIndexByData(index);
-      const currentSlideIndex = swiper.getSlideIndexByData(swiper.realIndex);
-      const loopFix = (dir) => {
-        const indexBeforeLoopFix = swiper.activeIndex;
-        swiper.loopFix({
-          direction: dir,
-          activeSlideIndex: newSlideIndex,
-          slideTo: false,
-        });
-        const indexAfterFix = swiper.activeIndex;
-        if (indexBeforeLoopFix === indexAfterFix) {
-          swiper.slideToLoop(realIndex, 0, false, true);
-        }
-      };
-      if (newSlideIndex > swiper.slides.length - swiper.loopedSlides) {
-        loopFix(newSlideIndex > currentSlideIndex ? 'next' : 'prev');
-      } else if (swiper.params.centeredSlides) {
-        const slidesPerView =
-          swiper.params.slidesPerView === 'auto'
-            ? swiper.slidesPerViewDynamic()
-            : Math.ceil(parseFloat(swiper.params.slidesPerView, 10));
-        if (newSlideIndex < Math.floor(slidesPerView / 2)) {
-          loopFix('prev');
-        }
-      }
-
       swiper.slideToLoop(index);
     } else {
       swiper.slideTo(index);