fix(core): correctly calc slide's DOM indexes, actual for Element

nolimits4web · Feb 27, 2023 · 18b1f2b · 18b1f2b
1 parent adb40f4
commit 18b1f2b
Show file tree

Hide file tree

Showing 8 changed files with 21 additions and 20 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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) => {