feat(core): add rewind functionality

fixes #5003
fixes #5270

src/angular/src/swiper.component.ts

@@ -119,6 +119,7 @@ export class SwiperComponent implements OnInit {
   @Input() loopedSlides: SwiperOptions['loopedSlides'];
   @Input() loopFillGroupWithBlank: SwiperOptions['loopFillGroupWithBlank'];
   @Input() loopPreventsSlide: SwiperOptions['loopPreventsSlide'];
+  @Input() rewind: SwiperOptions['rewind'];
   @Input() allowSlidePrev: SwiperOptions['allowSlidePrev'];
   @Input() allowSlideNext: SwiperOptions['allowSlideNext'];
   @Input() swipeHandler: SwiperOptions['swipeHandler'];

src/angular/src/utils/params-list.ts

@@ -66,6 +66,7 @@ export const paramsList = [
   '_loopedSlides',
   '_loopFillGroupWithBlank',
   'loopPreventsSlide',
+  '_rewind',
   '_allowSlidePrev',
   '_allowSlideNext',
   '_swipeHandler',

src/core/defaults.js

@@ -107,6 +107,9 @@ export default {
   loopFillGroupWithBlank: false,
   loopPreventsSlide: true,
 
+  // rewind
+  rewind: false,
+
   // Swiping/no swiping
   allowSlidePrev: true,
   allowSlideNext: true,

src/core/slide/slideNext.js

@@ -14,5 +14,8 @@ export default function slideNext(speed = this.params.speed, runCallbacks = true
     // eslint-disable-next-line
     swiper._clientLeft = swiper.$wrapperEl[0].clientLeft;
   }
+  if (params.rewind && swiper.isEnd) {
+    return swiper.slideTo(0, speed, runCallbacks, internal);
+  }
   return swiper.slideTo(swiper.activeIndex + increment, speed, runCallbacks, internal);
 }

src/core/slide/slidePrev.js

@@ -45,5 +45,8 @@ export default function slidePrev(speed = this.params.speed, runCallbacks = true
       prevIndex = Math.max(prevIndex, 0);
     }
   }
+  if (params.rewind && swiper.isBeginning) {
+    return swiper.slideTo(swiper.slides.length - 1, speed, runCallbacks, internal);
+  }
   return swiper.slideTo(prevIndex, speed, runCallbacks, internal);
 }

src/modules/a11y/a11y.js

@@ -97,7 +97,7 @@ export default function A11y({ swiper, extendParams, on }) {
   }
 
   function updateNavigation() {
-    if (swiper.params.loop || !swiper.navigation) return;
+    if (swiper.params.loop || swiper.params.rewind || !swiper.navigation) return;
     const { $nextEl, $prevEl } = swiper.navigation;
 
     if ($prevEl && $prevEl.length > 0) {

src/modules/navigation/navigation.js

@@ -52,17 +52,17 @@ export default function Navigation({ swiper, extendParams, on, emit }) {
     if (swiper.params.loop) return;
     const { $nextEl, $prevEl } = swiper.navigation;
 
-    toggleEl($prevEl, swiper.isBeginning);
-    toggleEl($nextEl, swiper.isEnd);
+    toggleEl($prevEl, swiper.isBeginning && !swiper.params.rewind);
+    toggleEl($nextEl, swiper.isEnd && !swiper.params.rewind);
   }
   function onPrevClick(e) {
     e.preventDefault();
-    if (swiper.isBeginning && !swiper.params.loop) return;
+    if (swiper.isBeginning && !swiper.params.loop && !swiper.params.rewind) return;
     swiper.slidePrev();
   }
   function onNextClick(e) {
     e.preventDefault();
-    if (swiper.isEnd && !swiper.params.loop) return;
+    if (swiper.isEnd && !swiper.params.loop && !swiper.params.rewind) return;
     swiper.slideNext();
   }
   function init() {

src/react/params-list.js

@@ -68,6 +68,7 @@ const paramsList = [
   '_loopedSlides',
   '_loopFillGroupWithBlank',
   'loopPreventsSlide',
+  '_rewind',
   '_allowSlidePrev',
   '_allowSlideNext',
   '_swipeHandler',

src/svelte/params-list.js

@@ -68,6 +68,7 @@ const paramsList = [
   '_loopedSlides',
   '_loopFillGroupWithBlank',
   'loopPreventsSlide',
+  '_rewind',
   '_allowSlidePrev',
   '_allowSlideNext',
   '_swipeHandler',

src/types/swiper-options.d.ts

@@ -596,10 +596,25 @@ export interface SwiperOptions {
    *
    * @default false
    *
-   * @note If you use it along with `slidesPerView: 'auto'` then you need to specify `loopedSlides` parameter with amount of slides to loop (duplicate)
+   * @note If you use it along with `slidesPerView: 'auto'` then you need to specify `loopedSlides` parameter with amount of slides to loop (duplicate). Should not be used together with `rewind` mode
    */
   loop?: boolean;
 
+  /**
+   * Set to `true` to enable "rewind" mode. When enabled, clicking "next" navigation button (or calling `.slideNext()`) when on last slide will slide back to the first slide. Clicking "prev" navigation button (or calling `.slidePrev()`) when on first slide will slide forward to the last slide.
+   *
+   * Because of nature of how the loop mode works, it will add duplicated slides. Such duplicated slides will have additional classes:
+   * - `swiper-slide-duplicate` - represents duplicated slide
+   * - `swiper-slide-duplicate-active` - represents slide duplicated to the currently active slide
+   * - `swiper-slide-duplicate-next` - represents slide duplicated to the slide next to active
+   * - `swiper-slide-duplicate-prev` - represents slide duplicated to the slide previous to active
+   *
+   * @default false
+   *
+   * @note Should not be used together with `loop` mode
+   */
+  rewind?: boolean;
+
   /**
    * Addition number of slides that will be cloned after creating of loop
    *

src/vue/params-list.js

@@ -68,6 +68,7 @@ const paramsList = [
   '_loopedSlides',
   '_loopFillGroupWithBlank',
   'loopPreventsSlide',
+  '_rewind',
   '_allowSlidePrev',
   '_allowSlideNext',
   '_swipeHandler',

src/vue/swiper-vue.d.ts

@@ -269,6 +269,7 @@ declare const Swiper: DefineComponent<
       type: BooleanConstructor;
       default: undefined;
     };
+    rewind: { type: BooleanConstructor; default: undefined };
     allowSlidePrev: {
       type: BooleanConstructor;
       default: undefined;

src/vue/swiper.js

@@ -90,6 +90,7 @@ const Swiper = {
     loopedSlides: { type: Number, default: undefined },
     loopFillGroupWithBlank: { type: Boolean, default: undefined },
     loopPreventsSlide: { type: Boolean, default: undefined },
+    rewind: { type: Boolean, default: undefined },
     allowSlidePrev: { type: Boolean, default: undefined },
     allowSlideNext: { type: Boolean, default: undefined },
     swipeHandler: { type: Boolean, default: undefined },