fix(core): add/remove slide classes only when changed

fixes #7356
nolimits4web · Mar 28, 2024 · 3312fba · 3312fba
1 parent 5b0fa84
commit 3312fba
Showing 1 changed file with 16 additions and 20 deletions.
diff --git a/src/core/update/updateSlidesClasses.mjs b/src/core/update/updateSlidesClasses.mjs
@@ -1,5 +1,13 @@
 import { elementChildren, elementNextAll, elementPrevAll } from '../../shared/utils.mjs';
 
+const toggleSlideClasses = (slideEl, condition, className) => {
+  if (condition && !slideEl.classList.contains(className)) {
+    slideEl.classList.add(className);
+  } else if (!condition && slideEl.classList.contains(className)) {
+    slideEl.classList.remove(className);
+  }
+};
+
 export default function updateSlidesClasses() {
   const swiper = this;
 
@@ -13,9 +21,6 @@ export default function updateSlidesClasses() {
       `.${params.slideClass}${selector}, swiper-slide${selector}`,
     )[0];
   };
-  slides.forEach((slideEl) => {
-    slideEl.classList.remove(params.slideActiveClass, params.slideNextClass, params.slidePrevClass);
-  });
 
   let activeSlide;
   let prevSlide;
@@ -38,37 +43,28 @@ export default function updateSlidesClasses() {
       activeSlide = slides[activeIndex];
     }
   }
-  if (activeSlide) {
-    // Active classes
-    activeSlide.classList.add(params.slideActiveClass);
 
-    if (gridEnabled) {
-      if (nextSlide) {
-        nextSlide.classList.add(params.slideNextClass);
-      }
-      if (prevSlide) {
-        prevSlide.classList.add(params.slidePrevClass);
-      }
-    } else {
+  if (activeSlide) {
+    if (!gridEnabled) {
       // Next Slide
       nextSlide = elementNextAll(activeSlide, `.${params.slideClass}, swiper-slide`)[0];
       if (params.loop && !nextSlide) {
         nextSlide = slides[0];
       }
-      if (nextSlide) {
-        nextSlide.classList.add(params.slideNextClass);
-      }
 
       // Prev Slide
       prevSlide = elementPrevAll(activeSlide, `.${params.slideClass}, swiper-slide`)[0];
       if (params.loop && !prevSlide === 0) {
         prevSlide = slides[slides.length - 1];
       }
-      if (prevSlide) {
-        prevSlide.classList.add(params.slidePrevClass);
-      }
     }
   }
 
+  slides.forEach((slideEl) => {
+    toggleSlideClasses(slideEl, slideEl === activeSlide, params.slideActiveClass);
+    toggleSlideClasses(slideEl, slideEl === nextSlide, params.slideNextClass);
+    toggleSlideClasses(slideEl, slideEl === prevSlide, params.slidePrevClass);
+  });
+
   swiper.emitSlidesClasses();
 }