feat(core): rewind on swipes (#5422)

* feat(core): `rewindOnSwipe` * fix(core): remove rewindSwipe option * fix(core): revert space * fix(core): remove console log * fix(core): rewind on swipe * feat(core): rewind on swipe Co-authored-by: Vladimir Kharlampidi <[email protected]>
nolimits4web · Feb 10, 2022 · 1a2f83b · 1a2f83b
1 parent 0567641
commit 1a2f83b
Show file tree

Hide file tree

Showing 2 changed files with 89 additions and 70 deletions.
diff --git a/playground/core/index.html b/playground/core/index.html
@@ -1,72 +1,69 @@
 <!DOCTYPE html>
 <html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Swiper Playground</title>
+    <meta name="viewport" content="width=device-width" />
+  </head>
 
-<head>
-  <meta charset="UTF-8" />
-  <title>Swiper Playground</title>
-  <meta name="viewport" content="width=device-width" />
-</head>
+  <body>
+    <section class="swiper">
+      <div class="swiper-pagination"></div>
+      <div class="swiper-slide">Slide 1</div>
+      <div class="swiper-slide">Slide 2</div>
+      <div class="swiper-slide">Slide 3</div>
+      <div class="swiper-slide">Slide 4</div>
+      <div class="swiper-slide">Slide 5</div>
+      <div class="swiper-slide">Slide 6</div>
+      <div class="swiper-slide">Slide 7</div>
+      <div class="swiper-slide">Slide 8</div>
+      <div class="swiper-slide">Slide 9</div>
+      <div class="swiper-slide">Slide 10</div>
+    </section>
+    <style>
+      body,
+      html {
+        padding: 0;
+        margin: 0;
+        position: relative;
+        height: 100%;
+      }
 
-<body>
-  <section class="swiper">
-    <div class="swiper-pagination"></div>
-    <div class="swiper-slide">Slide 1</div>
-    <div class="swiper-slide">Slide 2</div>
-    <div class="swiper-slide">Slide 3</div>
-    <div class="swiper-slide">Slide 4</div>
-    <div class="swiper-slide">Slide 5</div>
-    <div class="swiper-slide">Slide 6</div>
-    <div class="swiper-slide">Slide 7</div>
-    <div class="swiper-slide">Slide 8</div>
-    <div class="swiper-slide">Slide 9</div>
-    <div class="swiper-slide">Slide 10</div>
-  </section>
-  <style>
-    body,
-    html {
-      padding: 0;
-      margin: 0;
-      position: relative;
-      height: 100%;
-    }
+      .swiper {
+        width: 100%;
+        height: 300px;
+        margin: 50px auto;
+      }
 
-    .swiper {
-      width: 100%;
-      height: 300px;
-      margin: 50px auto;
-    }
+      .swiper-slide {
+        background: #f1f1f1;
+        color: #000;
+        text-align: center;
+        line-height: 300px;
+      }
+    </style>
+    <script type="module">
+      // eslint-disable-next-line
+      import 'swiper/swiper-bundle.css';
 
-    .swiper-slide {
-      background: #f1f1f1;
-      color: #000;
-      text-align: center;
-      line-height: 300px;
-    }
-  </style>
-  <script type="module">
-    // eslint-disable-next-line
-    import 'swiper/swiper-bundle.css';
-
-    // eslint-disable-next-line
-    import Swiper from 'swiper/swiper-bundle.esm.js';
-
-    // eslint-disable-next-line
-    window.swiper = new Swiper({
-      el: '.swiper',
-      createElements: true,
-      speed: 300,
-      cssMode: true,
-      rewind: true,
-      slidesPerView: 1,
-      navigation: true,
-      pagination: {
-        el: '.swiper-pagination',
-        dynamicBullets: true,
-        // dynamicMainBullets: 3,
-      },
-    });
-
-  </script>
-</body>
+      // eslint-disable-next-line
+      import Swiper from 'swiper/swiper-bundle.esm.js';
 
+      // eslint-disable-next-line
+      window.swiper = new Swiper({
+        el: '.swiper',
+        createElements: true,
+        speed: 300,
+        // cssMode: true,
+        rewind: true,
+        slidesPerView: 1,
+        navigation: true,
+        pagination: {
+          el: '.swiper-pagination',
+          dynamicBullets: true,
+          // dynamicMainBullets: 3,
+        },
+      });
+    </script>
+  </body>
 </html>
diff --git a/src/core/events/onTouchEnd.js b/src/core/events/onTouchEnd.js
@@ -101,23 +101,45 @@ export default function onTouchEnd(event) {
     }
   }
 
+  let rewindFirstIndex;
+  let rewindLastIndex;
+  if (params.rewind) {
+    if (swiper.isBeginning) {
+      const lastIndex =
+        swiper.params.virtual && swiper.params.virtual.enabled && swiper.virtual
+          ? swiper.virtual.slides.length - 1
+          : swiper.slides.length - 1;
+      rewindLastIndex = lastIndex;
+    } else if (swiper.isEnd) {
+      rewindFirstIndex = 0;
+    }
+  }
   // Find current slide size
   const ratio = (currentPos - slidesGrid[stopIndex]) / groupSize;
   const increment = stopIndex < params.slidesPerGroupSkip - 1 ? 1 : params.slidesPerGroup;
-
   if (timeDiff > params.longSwipesMs) {
     // Long touches
     if (!params.longSwipes) {
       swiper.slideTo(swiper.activeIndex);
       return;
     }
     if (swiper.swipeDirection === 'next') {
-      if (ratio >= params.longSwipesRatio) swiper.slideTo(stopIndex + increment);
+      if (ratio >= params.longSwipesRatio)
+        swiper.slideTo(params.rewind && swiper.isEnd ? rewindFirstIndex : stopIndex + increment);
       else swiper.slideTo(stopIndex);
     }
     if (swiper.swipeDirection === 'prev') {
-      if (ratio > 1 - params.longSwipesRatio) swiper.slideTo(stopIndex + increment);
-      else swiper.slideTo(stopIndex);
+      if (ratio > 1 - params.longSwipesRatio) {
+        swiper.slideTo(stopIndex + increment);
+      } else if (
+        rewindLastIndex !== null &&
+        ratio < 0 &&
+        Math.abs(ratio) > params.longSwipesRatio
+      ) {
+        swiper.slideTo(rewindLastIndex);
+      } else {
+        swiper.slideTo(stopIndex);
+      }
     }
   } else {
     // Short swipes
@@ -130,10 +152,10 @@ export default function onTouchEnd(event) {
       (e.target === swiper.navigation.nextEl || e.target === swiper.navigation.prevEl);
     if (!isNavButtonTarget) {
       if (swiper.swipeDirection === 'next') {
-        swiper.slideTo(stopIndex + increment);
+        swiper.slideTo(rewindFirstIndex !== null ? rewindFirstIndex : stopIndex + increment);
       }
       if (swiper.swipeDirection === 'prev') {
-        swiper.slideTo(stopIndex);
+        swiper.slideTo(rewindLastIndex !== null ? rewindLastIndex : stopIndex);
       }
     } else if (e.target === swiper.navigation.nextEl) {
       swiper.slideTo(stopIndex + increment);