diff --git a/playground/core/index.html b/playground/core/index.html index 74ac4caa2..ab3f8023d 100644 --- a/playground/core/index.html +++ b/playground/core/index.html @@ -14,6 +14,9 @@
+ + + diff --git a/src/core/events/onTouchEnd.mjs b/src/core/events/onTouchEnd.mjs index df0a982ea..efee9fb34 100644 --- a/src/core/events/onTouchEnd.mjs +++ b/src/core/events/onTouchEnd.mjs @@ -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; diff --git a/src/core/events/onTouchMove.mjs b/src/core/events/onTouchMove.mjs index ed13f5ba3..2dab1eb13 100644 --- a/src/core/events/onTouchMove.mjs +++ b/src/core/events/onTouchMove.mjs @@ -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, }); @@ -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; @@ -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(); @@ -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 && @@ -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) { @@ -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()) { @@ -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, diff --git a/src/core/loop/loopFix.mjs b/src/core/loop/loopFix.mjs index f091069ef..e3778d9e1 100644 --- a/src/core/loop/loopFix.mjs +++ b/src/core/loop/loopFix.mjs @@ -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; @@ -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 = []; @@ -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) => { @@ -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 { @@ -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 {