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);