From 18b1f2b4ecbdf9986314b7e483b4b7d316b0c1b4 Mon Sep 17 00:00:00 2001 From: Vladimir Kharlampidi Date: Mon, 27 Feb 2023 15:59:31 +0300 Subject: [PATCH] fix(core): correctly calc slide's DOM indexes, actual for Element --- src/core/core.js | 8 ++++++++ src/core/loop/loopFix.js | 4 +--- src/core/slide/slideToClickedSlide.js | 6 +++--- src/core/slide/slideToLoop.js | 4 +--- src/core/update/updateProgress.js | 6 ++---- src/modules/hash-navigation/hash-navigation.js | 6 +++--- src/modules/history/history.js | 3 +-- src/shared/effect-virtual-transition-end.js | 4 ++-- 8 files changed, 21 insertions(+), 20 deletions(-) diff --git a/src/core/core.js b/src/core/core.js index e2d68678f..a19d715bc 100644 --- a/src/core/core.js +++ b/src/core/core.js @@ -7,6 +7,7 @@ import { createElement, elementChildren, elementStyle, + elementIndex, } from '../shared/utils.js'; import { getSupport } from '../shared/get-support.js'; import { getDevice } from '../shared/get-device.js'; @@ -221,6 +222,13 @@ class Swiper { return swiper; } + getSlideIndex(slideEl) { + const { slidesEl, params } = this; + const slides = elementChildren(slidesEl, `.${params.slideClass}, swiper-slide`); + const firstSlideIndex = elementIndex(slides[0]); + return elementIndex(slideEl) - firstSlideIndex; + } + recalcSlides() { const swiper = this; const { slidesEl, params } = swiper; diff --git a/src/core/loop/loopFix.js b/src/core/loop/loopFix.js index 813d52603..1d0a5c610 100644 --- a/src/core/loop/loopFix.js +++ b/src/core/loop/loopFix.js @@ -1,5 +1,3 @@ -import { elementIndex } from '../../shared/utils.js'; - export default function loopFix({ slideRealIndex, slideTo = true, @@ -50,7 +48,7 @@ export default function loopFix({ let activeIndex = swiper.activeIndex; if (typeof activeSlideIndex === 'undefined') { - activeSlideIndex = elementIndex( + activeSlideIndex = swiper.getSlideIndex( swiper.slides.filter((el) => el.classList.contains('swiper-slide-active'))[0], ); } else { diff --git a/src/core/slide/slideToClickedSlide.js b/src/core/slide/slideToClickedSlide.js index 3ac9433be..5e69f11dc 100644 --- a/src/core/slide/slideToClickedSlide.js +++ b/src/core/slide/slideToClickedSlide.js @@ -1,4 +1,4 @@ -import { elementChildren, elementIndex, nextTick } from '../../shared/utils.js'; +import { elementChildren, nextTick } from '../../shared/utils.js'; export default function slideToClickedSlide() { const swiper = this; @@ -18,7 +18,7 @@ export default function slideToClickedSlide() { slideToIndex > swiper.slides.length - swiper.loopedSlides + slidesPerView / 2 ) { swiper.loopFix(); - slideToIndex = elementIndex( + slideToIndex = swiper.getSlideIndex( elementChildren(slidesEl, `${slideSelector}[data-swiper-slide-index="${realIndex}"]`)[0], ); @@ -30,7 +30,7 @@ export default function slideToClickedSlide() { } } else if (slideToIndex > swiper.slides.length - slidesPerView) { swiper.loopFix(); - slideToIndex = elementIndex( + slideToIndex = swiper.getSlideIndex( elementChildren(slidesEl, `${slideSelector}[data-swiper-slide-index="${realIndex}"]`)[0], ); diff --git a/src/core/slide/slideToLoop.js b/src/core/slide/slideToLoop.js index 028b12413..2bf0cb4fa 100644 --- a/src/core/slide/slideToLoop.js +++ b/src/core/slide/slideToLoop.js @@ -1,5 +1,3 @@ -import { elementIndex } from '../../shared/utils.js'; - export default function slideToLoop( index = 0, speed = this.params.speed, @@ -19,7 +17,7 @@ export default function slideToLoop( // eslint-disable-next-line newIndex = newIndex + swiper.virtual.slidesBefore; } else { - newIndex = elementIndex( + newIndex = swiper.getSlideIndex( swiper.slides.filter( (slideEl) => slideEl.getAttribute('data-swiper-slide-index') * 1 === newIndex, )[0], diff --git a/src/core/update/updateProgress.js b/src/core/update/updateProgress.js index 4bfb4163e..ae3a4f0fe 100644 --- a/src/core/update/updateProgress.js +++ b/src/core/update/updateProgress.js @@ -1,5 +1,3 @@ -import { elementIndex } from '../../shared/utils.js'; - export default function updateProgress(translate) { const swiper = this; if (typeof translate === 'undefined') { @@ -27,10 +25,10 @@ export default function updateProgress(translate) { } if (params.loop) { - const firstSlideIndex = elementIndex( + const firstSlideIndex = swiper.getSlideIndex( swiper.slides.filter((el) => el.getAttribute('data-swiper-slide-index') === '0')[0], ); - const lastSlideIndex = elementIndex( + const lastSlideIndex = swiper.getSlideIndex( swiper.slides.filter( (el) => el.getAttribute('data-swiper-slide-index') * 1 === swiper.slides.length - 1, )[0], diff --git a/src/modules/hash-navigation/hash-navigation.js b/src/modules/hash-navigation/hash-navigation.js index cba01eabd..ae49b52ea 100644 --- a/src/modules/hash-navigation/hash-navigation.js +++ b/src/modules/hash-navigation/hash-navigation.js @@ -1,5 +1,5 @@ import { getWindow, getDocument } from 'ssr-window'; -import { elementChildren, elementIndex } from '../../shared/utils.js'; +import { elementChildren } from '../../shared/utils.js'; export default function HashNavigation({ swiper, extendParams, emit, on }) { let initialized = false; @@ -17,7 +17,7 @@ export default function HashNavigation({ swiper, extendParams, emit, on }) { const newHash = document.location.hash.replace('#', ''); const activeSlideHash = swiper.slides[swiper.activeIndex].getAttribute('data-hash'); if (newHash !== activeSlideHash) { - const newIndex = elementIndex( + const newIndex = swiper.getSlideIndex( elementChildren( swiper.slidesEl, `.${swiper.params.slideClass}[data-hash="${newHash}"], swiper-slide[data-hash="${newHash}"]`, @@ -61,7 +61,7 @@ export default function HashNavigation({ swiper, extendParams, emit, on }) { const slide = swiper.slides[i]; const slideHash = slide.getAttribute('data-hash') || slide.getAttribute('data-history'); if (slideHash === hash) { - const index = elementIndex(slide); + const index = swiper.getSlideIndex(slide); swiper.slideTo(index, speed, swiper.params.runCallbacksOnInit, true); } } diff --git a/src/modules/history/history.js b/src/modules/history/history.js index aa292b892..5304f481d 100644 --- a/src/modules/history/history.js +++ b/src/modules/history/history.js @@ -1,5 +1,4 @@ import { getWindow } from 'ssr-window'; -import { elementIndex } from '../../shared/utils.js'; export default function History({ swiper, extendParams, on }) { extendParams({ @@ -80,7 +79,7 @@ export default function History({ swiper, extendParams, on }) { const slide = swiper.slides[i]; const slideHistory = slugify(slide.getAttribute('data-history')); if (slideHistory === value) { - const index = elementIndex(slide); + const index = swiper.getSlideIndex(slide); swiper.slideTo(index, speed, runCallbacks); } } diff --git a/src/shared/effect-virtual-transition-end.js b/src/shared/effect-virtual-transition-end.js index 28c9323d6..0dabd4b1b 100644 --- a/src/shared/effect-virtual-transition-end.js +++ b/src/shared/effect-virtual-transition-end.js @@ -1,4 +1,4 @@ -import { elementIndex, elementTransitionEnd } from './utils.js'; +import { elementTransitionEnd } from './utils.js'; export default function effectVirtualTransitionEnd({ swiper, @@ -27,7 +27,7 @@ export default function effectVirtualTransitionEnd({ const el = transformEl.classList.contains('swiper-slide-transform') ? getSlide(transformEl) : transformEl; - return elementIndex(el) === activeIndex; + return swiper.getSlideIndex(el) === activeIndex; }); } transitionEndTarget.forEach((el) => {