Skip to content

Commit 74cc297

Browse files
WesselKroosWesselKroos
authored
fix(core): fixes issues when slidesOffsetBefore & slidesOffsetAfter are combinated with centeredSlides, slidesPerView & loop (#8038)
* Fixes #7298 #7956 #6916 by making slidesOffsetBefore & slidesOffsetAfter work in combination with centeredSlides, slidesPerView & loop * prettier fixes
1 parent 60bb79b commit 74cc297

4 files changed

Lines changed: 22 additions & 17 deletions

File tree

‎src/core/loop/loopCreate.mjs‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -73,9 +73,11 @@ export default function loopCreate(slideRealIndex, initial) {
7373
initSlides();
7474
}
7575

76+
const bothDirections =
77+
params.centeredSlides || !!params.slidesOffsetBefore || !!params.slidesOffsetAfter;
7678
swiper.loopFix({
7779
slideRealIndex,
78-
direction: params.centeredSlides ? undefined : 'next',
80+
direction: bothDirections ? undefined : 'next',
7981
initial,
8082
});
8183
}

‎src/core/loop/loopFix.mjs‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -15,15 +15,17 @@ export default function loopFix({
1515
if (!swiper.params.loop) return;
1616
swiper.emit('beforeLoopFix');
1717
const { slides, allowSlidePrev, allowSlideNext, slidesEl, params } = swiper;
18-
const { centeredSlides, initialSlide } = params;
18+
const { centeredSlides, slidesOffsetBefore, slidesOffsetAfter, initialSlide } = params;
19+
const bothDirections = centeredSlides || !!slidesOffsetBefore || !!slidesOffsetAfter;
20+
1921
swiper.allowSlidePrev = true;
2022
swiper.allowSlideNext = true;
2123

2224
if (swiper.virtual && params.virtual.enabled) {
2325
if (slideTo) {
24-
if (!params.centeredSlides && swiper.snapIndex === 0) {
26+
if (!bothDirections && swiper.snapIndex === 0) {
2527
swiper.slideTo(swiper.virtual.slides.length, 0, false, true);
26-
} else if (params.centeredSlides && swiper.snapIndex < params.slidesPerView) {
28+
} else if (bothDirections && swiper.snapIndex < params.slidesPerView) {
2729
swiper.slideTo(swiper.virtual.slides.length + swiper.snapIndex, 0, false, true);
2830
} else if (swiper.snapIndex === swiper.snapGrid.length - 1) {
2931
swiper.slideTo(swiper.virtual.slidesBefore, 0, false, true);
@@ -39,13 +41,13 @@ export default function loopFix({
3941
slidesPerView = swiper.slidesPerViewDynamic();
4042
} else {
4143
slidesPerView = Math.ceil(parseFloat(params.slidesPerView, 10));
42-
if (centeredSlides && slidesPerView % 2 === 0) {
44+
if (bothDirections && slidesPerView % 2 === 0) {
4345
slidesPerView = slidesPerView + 1;
4446
}
4547
}
4648

4749
const slidesPerGroup = params.slidesPerGroupAuto ? slidesPerView : params.slidesPerGroup;
48-
let loopedSlides = centeredSlides
50+
let loopedSlides = bothDirections
4951
? Math.max(slidesPerGroup, Math.ceil(slidesPerView / 2))
5052
: slidesPerGroup;
5153

@@ -72,7 +74,7 @@ export default function loopFix({
7274

7375
const cols = gridEnabled ? Math.ceil(slides.length / params.grid.rows) : slides.length;
7476

75-
const isInitialOverflow = initial && cols - initialSlide < slidesPerView && !centeredSlides;
77+
const isInitialOverflow = initial && cols - initialSlide < slidesPerView && !bothDirections;
7678

7779
let activeIndex = isInitialOverflow ? initialSlide : swiper.activeIndex;
7880

@@ -93,7 +95,7 @@ export default function loopFix({
9395
const activeColIndex = gridEnabled ? slides[activeSlideIndex].column : activeSlideIndex;
9496
const activeColIndexWithShift =
9597
activeColIndex +
96-
(centeredSlides && typeof setTranslate === 'undefined' ? -slidesPerView / 2 + 0.5 : 0);
98+
(bothDirections && typeof setTranslate === 'undefined' ? -slidesPerView / 2 + 0.5 : 0);
9799
// prepend last slides before start
98100
if (activeColIndexWithShift < loopedSlides) {
99101
slidesPrepended = Math.max(loopedSlides - activeColIndexWithShift, slidesPerGroup);

‎src/core/slide/slideToLoop.mjs‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -32,27 +32,27 @@ export default function slideToLoop(index = 0, speed, runCallbacks = true, inter
3232
? Math.ceil(swiper.slides.length / swiper.params.grid.rows)
3333
: swiper.slides.length;
3434

35-
const { centeredSlides } = swiper.params;
35+
const { centeredSlides, slidesOffsetBefore, slidesOffsetAfter } = swiper.params;
36+
const bothDirections = centeredSlides || !!slidesOffsetBefore || !!slidesOffsetAfter;
3637
let slidesPerView = swiper.params.slidesPerView;
3738
if (slidesPerView === 'auto') {
3839
slidesPerView = swiper.slidesPerViewDynamic();
3940
} else {
4041
slidesPerView = Math.ceil(parseFloat(swiper.params.slidesPerView, 10));
41-
if (centeredSlides && slidesPerView % 2 === 0) {
42+
if (bothDirections && slidesPerView % 2 === 0) {
4243
slidesPerView = slidesPerView + 1;
4344
}
4445
}
4546
let needLoopFix = cols - targetSlideIndex < slidesPerView;
46-
47-
if (centeredSlides) {
47+
if (bothDirections) {
4848
needLoopFix = needLoopFix || targetSlideIndex < Math.ceil(slidesPerView / 2);
4949
}
50-
if (internal && centeredSlides && swiper.params.slidesPerView !== 'auto' && !gridEnabled) {
50+
if (internal && bothDirections && swiper.params.slidesPerView !== 'auto' && !gridEnabled) {
5151
needLoopFix = false;
5252
}
5353

5454
if (needLoopFix) {
55-
const direction = centeredSlides
55+
const direction = bothDirections
5656
? targetSlideIndex < swiper.activeIndex
5757
? 'prev'
5858
: 'next'

‎src/core/update/updateSlides.mjs‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ export default function updateSlides() {
1414

1515
const params = swiper.params;
1616

17-
const { wrapperEl, slidesEl, size: swiperSize, rtlTranslate: rtl, wrongRTL } = swiper;
17+
const { wrapperEl, slidesEl, rtlTranslate: rtl, wrongRTL } = swiper;
1818
const isVirtual = swiper.virtual && params.virtual.enabled;
1919
const previousSlidesLength = isVirtual ? swiper.virtual.slides.length : swiper.slides.length;
2020
const slides = elementChildren(slidesEl, `.${swiper.params.slideClass}, swiper-slide`);
@@ -36,6 +36,7 @@ export default function updateSlides() {
3636
const previousSnapGridLength = swiper.snapGrid.length;
3737
const previousSlidesGridLength = swiper.slidesGrid.length;
3838

39+
const swiperSize = swiper.size - offsetBefore - offsetAfter;
3940
let spaceBetween = params.spaceBetween;
4041
let slidePosition = -offsetBefore;
4142
let prevSlideSize = 0;
@@ -49,7 +50,7 @@ export default function updateSlides() {
4950
spaceBetween = parseFloat(spaceBetween);
5051
}
5152

52-
swiper.virtualSize = -spaceBetween;
53+
swiper.virtualSize = -spaceBetween - offsetBefore - offsetAfter;
5354

5455
// reset margins
5556
slides.forEach((slideEl) => {
@@ -269,7 +270,7 @@ export default function updateSlides() {
269270
allSlidesSize += slideSizeValue + (spaceBetween || 0);
270271
});
271272
allSlidesSize -= spaceBetween;
272-
const offsetSize = (params.slidesOffsetBefore || 0) + (params.slidesOffsetAfter || 0);
273+
const offsetSize = (offsetBefore || 0) + (offsetAfter || 0);
273274
if (allSlidesSize + offsetSize < swiperSize) {
274275
const allSlidesOffset = (swiperSize - allSlidesSize - offsetSize) / 2;
275276
snapGrid.forEach((snap, snapIndex) => {

0 commit comments

Comments
 (0)