Skip to content

Commit

Permalink
feat: update loop mode logic and lowered requirements
Browse files Browse the repository at this point in the history
  • Loading branch information
@nolimits4web
nolimits4web committed Sep 28, 2023
1 parent dc88f37 commit 703ede6
Show file tree
Hide file tree
Showing 4 changed files with 64 additions and 49 deletions.
3 changes: 3 additions & 0 deletions playground/core/index.html
View file
Expand Up @@ -14,6 +14,9 @@
<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>
<div class="swiper-pagination"></div>
</div>
Expand Down
3 changes: 1 addition & 2 deletions src/core/events/onTouchEnd.mjs
View file
Expand Up @@ -71,13 +71,12 @@ export default function onTouchEnd(event) {
nextTick(() => {
if (!swiper.destroyed) swiper.allowClick = true;
});

if (
!data.isTouched ||
!data.isMoved ||
!swiper.swipeDirection ||
touches.diff === 0 ||
data.currentTranslate === data.startTranslate
(data.currentTranslate === data.startTranslate && !data.loopSwapReset)
) {
data.isTouched = false;
data.isMoved = false;
Expand Down
37 changes: 22 additions & 15 deletions src/core/events/onTouchMove.mjs
View file
Expand Up @@ -48,8 +48,6 @@ export default function onTouchMove(event) {
Object.assign(touches, {
startX: pageX,
startY: pageY,
prevX: swiper.touches.currentX,
prevY: swiper.touches.currentY,
currentX: pageX,
currentY: pageY,
});
Expand Down Expand Up @@ -87,6 +85,8 @@ export default function onTouchMove(event) {
}
if (e.targetTouches && e.targetTouches.length > 1) return;

touches.previousX = touches.currentX;
touches.previousY = touches.currentY;
touches.currentX = pageX;
touches.currentY = pageY;

Expand Down Expand Up @@ -158,11 +158,10 @@ export default function onTouchMove(event) {

const isLoop = swiper.params.loop && !params.cssMode;
const allowLoopFix =
(swiper.swipeDirection === 'next' && swiper.allowSlideNext) ||
(swiper.swipeDirection === 'prev' && swiper.allowSlidePrev);
(swiper.touchesDirection === 'next' && swiper.allowSlideNext) ||
(swiper.touchesDirection === 'prev' && swiper.allowSlidePrev);
if (!data.isMoved) {
if (isLoop && allowLoopFix) {
console.log('loop fix 1');
swiper.loopFix({ direction: swiper.swipeDirection });
}
data.startTranslate = swiper.getTranslate();
Expand All @@ -182,6 +181,7 @@ export default function onTouchMove(event) {
swiper.emit('sliderFirstMove', e);
}
let loopFixed;
let time = new Date().getTime();
if (
data.isMoved &&
data.allowThresholdMove &&
Expand All @@ -190,16 +190,21 @@ export default function onTouchMove(event) {
allowLoopFix &&
Math.abs(diff) >= 1
) {
console.log('loop fix 2');
// need another loop fix
swiper.loopFix({ direction: swiper.swipeDirection, setTranslate: true });
loopFixed = true;
Object.assign(touches, {
startX: pageX,
startY: pageY,
currentX: pageX,
currentY: pageY,
startTranslate: data.currentTranslate,
});
data.loopSwapReset = true;
data.startTranslate = data.currentTranslate;
return;
}
swiper.emit('sliderMove', e);
data.isMoved = true;

data.currentTranslate = diff + data.startTranslate;

let disableParentSwiper = true;
let resistanceRatio = params.resistanceRatio;
if (params.touchReleaseOnEdges) {
Expand All @@ -212,10 +217,10 @@ export default function onTouchMove(event) {
!loopFixed &&
data.allowThresholdMove &&
data.currentTranslate >
(params.centeredSlides ? swiper.minTranslate() - swiper.size / 2 : swiper.minTranslate())
(params.centeredSlides
? swiper.minTranslate() - swiper.slidesSizesGrid[swiper.activeIndex + 1]
: swiper.minTranslate())
) {
console.log('loop fix 3');

swiper.loopFix({ direction: 'prev', setTranslate: true, activeSlideIndex: 0 });
}
if (data.currentTranslate > swiper.minTranslate()) {
Expand All @@ -233,9 +238,11 @@ export default function onTouchMove(event) {
allowLoopFix &&
!loopFixed &&
data.allowThresholdMove &&
data.currentTranslate < swiper.maxTranslate()
data.currentTranslate <
(params.centeredSlides
? swiper.maxTranslate() + swiper.slidesSizesGrid[swiper.slidesSizesGrid.length - 1]
: swiper.maxTranslate())
) {
console.log('loop fix 4');
swiper.loopFix({
direction: 'next',
setTranslate: true,
Expand Down
70 changes: 38 additions & 32 deletions src/core/loop/loopFix.mjs
View file
Expand Up @@ -10,12 +10,6 @@ export default function loopFix({
const swiper = this;
if (!swiper.params.loop) return;
swiper.emit('beforeLoopFix');
// console.trace('fix', {
// slideRealIndex,
// direction,
// activeSlideIndex,
// setTranslate,
// });
const { slides, allowSlidePrev, allowSlideNext, slidesEl, params } = swiper;
const { centeredSlides } = params;
swiper.allowSlidePrev = true;
Expand All @@ -36,17 +30,30 @@ export default function loopFix({
swiper.emit('loopFix');
return;
}
let slidesPerView = params.slidesPerView;
if (slidesPerView === 'auto') {
slidesPerView = swiper.slidesPerViewDynamic();
} else {
slidesPerView = Math.ceil(parseFloat(params.slidesPerView, 10));
if (centeredSlides && slidesPerView % 2 === 0) {
slidesPerView = slidesPerView + 1;
}
}

const slidesPerView =
params.slidesPerView === 'auto'
? swiper.slidesPerViewDynamic()
: Math.ceil(parseFloat(params.slidesPerView, 10));
let loopedSlides = params.loopedSlides || params.slidesPerGroup;
if (loopedSlides % params.slidesPerGroup !== 0) {
loopedSlides += params.slidesPerGroup - (loopedSlides % params.slidesPerGroup);
}
swiper.loopedSlides = loopedSlides;

if (swiper.slides.length < slidesPerView + loopedSlides) {
try {
console.warn('Swiper: amount of slides is insufficient for loop mode, it will be disabled');
} catch (err) {
// err
}
}

const prependSlidesIndexes = [];
const appendSlidesIndexes = [];

Expand All @@ -65,29 +72,26 @@ export default function loopFix({

let slidesPrepended = 0;
let slidesAppended = 0;
let activeIndexShift = 0;
if (centeredSlides) {
activeIndexShift = activeSlideIndex - slidesPerView / 2 + 0.5;
console.log(activeIndexShift);
}
const activeSlideIndexWithShift =
activeSlideIndex +
(centeredSlides && typeof setTranslate === 'undefined' ? -slidesPerView / 2 + 0.5 : 0);
// prepend last slides before start
if (activeSlideIndex < loopedSlides) {
slidesPrepended = Math.max(loopedSlides - activeSlideIndex, params.slidesPerGroup);
for (let i = 0; i < loopedSlides - activeSlideIndex; i += 1) {
if (activeSlideIndexWithShift < loopedSlides) {
slidesPrepended = Math.max(loopedSlides - activeSlideIndexWithShift, params.slidesPerGroup);
for (let i = 0; i < loopedSlides - activeSlideIndexWithShift; i += 1) {
const index = i - Math.floor(i / slides.length) * slides.length;
prependSlidesIndexes.push(slides.length - index - 1);
}
} else if (activeSlideIndex + slidesPerView > swiper.slides.length - loopedSlides) {
// slidesAppended = Math.max(
// activeSlideIndex - (swiper.slides.length - loopedSlides * 2),
// params.slidesPerGroup,
// );
// for (let i = 0; i < slidesAppended; i += 1) {
// const index = i - Math.floor(i / slides.length) * slides.length;
// appendSlidesIndexes.push(index);
// }
} else if (activeSlideIndexWithShift + slidesPerView > swiper.slides.length - loopedSlides) {
slidesAppended = Math.max(
activeSlideIndexWithShift - (swiper.slides.length - loopedSlides * 2),
params.slidesPerGroup,
);
for (let i = 0; i < slidesAppended; i += 1) {
const index = i - Math.floor(i / slides.length) * slides.length;
appendSlidesIndexes.push(index);
}
}
console.log({ slidesAppended, slidesPrepended });

if (isPrev) {
prependSlidesIndexes.forEach((index) => {
Expand Down Expand Up @@ -123,8 +127,9 @@ export default function loopFix({
} else {
swiper.slideTo(activeIndex + slidesPrepended, 0, false, true);
if (setTranslate) {
swiper.touches[swiper.isHorizontal() ? 'startX' : 'startY'] += diff;
swiper.touchEventsData.currentTranslate = swiper.translate;
swiper.touchEventsData.startTranslate = swiper.touchEventsData.startTranslate - diff;
swiper.touchEventsData.currentTranslate =
swiper.touchEventsData.currentTranslate - diff;
}
}
} else {
Expand All @@ -143,8 +148,9 @@ export default function loopFix({
} else {
swiper.slideTo(activeIndex - slidesAppended, 0, false, true);
if (setTranslate) {
swiper.touches[swiper.isHorizontal() ? 'startX' : 'startY'] += diff;
swiper.touchEventsData.currentTranslate = swiper.translate;
swiper.touchEventsData.startTranslate = swiper.touchEventsData.startTranslate - diff;
swiper.touchEventsData.currentTranslate =
swiper.touchEventsData.currentTranslate - diff;
}
}
} else {
Expand Down

0 comments on commit 703ede6

Please sign in to comment.