diff --git a/src/core/update/updateSlidesClasses.mjs b/src/core/update/updateSlidesClasses.mjs index ed34d91ea..e2a3f8fd8 100644 --- 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(); }