diff --git a/src/components-shared/params-list.mjs b/src/components-shared/params-list.mjs index 1b10f8207..5bf89f530 100644 --- a/src/components-shared/params-list.mjs +++ b/src/components-shared/params-list.mjs @@ -68,7 +68,7 @@ const paramsList = [ 'preventClicksPropagation', '_slideToClickedSlide', '_loop', - 'loopedSlides', + 'loopAdditionalSlides', 'loopAddBlankSlides', 'loopPreventsSliding', '_rewind', diff --git a/src/core/defaults.mjs b/src/core/defaults.mjs index ae9a91ad2..99848ad53 100644 --- a/src/core/defaults.mjs +++ b/src/core/defaults.mjs @@ -101,7 +101,7 @@ export default { // loop loop: false, loopAddBlankSlides: true, - loopedSlides: null, + loopAdditionalSlides: 0, loopPreventsSliding: true, // rewind diff --git a/src/core/loop/loopFix.mjs b/src/core/loop/loopFix.mjs index f1af6c6cc..438c4f6aa 100644 --- a/src/core/loop/loopFix.mjs +++ b/src/core/loop/loopFix.mjs @@ -42,11 +42,13 @@ export default function loopFix({ } } - let loopedSlides = params.loopedSlides || params.slidesPerGroup; - if (loopedSlides % params.slidesPerGroup !== 0) { - loopedSlides += params.slidesPerGroup - (loopedSlides % params.slidesPerGroup); + const slidesPerGroup = params.slidesPerGroupAuto ? slidesPerView : params.slidesPerGroup; + let loopedSlides = slidesPerGroup; + + if (loopedSlides % slidesPerGroup !== 0) { + loopedSlides += slidesPerGroup - (loopedSlides % slidesPerGroup); } - swiper.loopedSlides = loopedSlides; + swiper.loopedSlides = loopedSlides + params.loopAdditionalSlides; const gridEnabled = swiper.grid && params.grid && params.grid.rows > 1; if (slides.length < slidesPerView + loopedSlides) { @@ -83,7 +85,7 @@ export default function loopFix({ (centeredSlides && typeof setTranslate === 'undefined' ? -slidesPerView / 2 + 0.5 : 0); // prepend last slides before start if (activeColIndexWithShift < loopedSlides) { - slidesPrepended = Math.max(loopedSlides - activeColIndexWithShift, params.slidesPerGroup); + slidesPrepended = Math.max(loopedSlides - activeColIndexWithShift, slidesPerGroup); for (let i = 0; i < loopedSlides - activeColIndexWithShift; i += 1) { const index = i - Math.floor(i / cols) * cols; if (gridEnabled) { @@ -101,7 +103,7 @@ export default function loopFix({ } else if (activeColIndexWithShift + slidesPerView > cols - loopedSlides) { slidesAppended = Math.max( activeColIndexWithShift - (cols - loopedSlides * 2), - params.slidesPerGroup, + slidesPerGroup, ); for (let i = 0; i < slidesAppended; i += 1) { const index = i - Math.floor(i / cols) * cols; diff --git a/src/swiper-vue.d.ts b/src/swiper-vue.d.ts index 777db920f..c41732e44 100644 --- a/src/swiper-vue.d.ts +++ b/src/swiper-vue.d.ts @@ -253,7 +253,7 @@ declare const Swiper: DefineComponent< }; loop: { type: BooleanConstructor; default: undefined }; loopAddBlankSlides: { type: BooleanConstructor; default: undefined }; - loopedSlides: { + loopAdditionalSlides: { type: NumberConstructor; default: undefined; }; diff --git a/src/types/swiper-options.d.ts b/src/types/swiper-options.d.ts index 8d6aef52f..2bb9850e2 100644 --- a/src/types/swiper-options.d.ts +++ b/src/types/swiper-options.d.ts @@ -649,11 +649,11 @@ export interface SwiperOptions { loopAddBlankSlides?: boolean; /** - * Defines how many slides before end/beginning it should rearrange (loop) slides. If not specified, defaults to `slidesPerView` + * Allows to increase amount of looped slides * - * @default null + * @default 0 */ - loopedSlides?: number | null; + loopAdditionalSlides?: number; /** * If enabled then slideNext/Prev will do nothing while slider is animating in loop mode