diff --git a/src/components-shared/params-list.mjs b/src/components-shared/params-list.mjs index 3b256b880..9ca0b0251 100644 --- a/src/components-shared/params-list.mjs +++ b/src/components-shared/params-list.mjs @@ -82,6 +82,7 @@ const paramsList = [ 'slideClass', 'slideActiveClass', 'slideVisibleClass', + 'slideFullyVisibleClass', 'slideNextClass', 'slidePrevClass', 'wrapperClass', diff --git a/src/core/core.mjs b/src/core/core.mjs index 824085df4..826a81df1 100644 --- a/src/core/core.mjs +++ b/src/core/core.mjs @@ -640,6 +640,7 @@ class Swiper { slides.forEach((slideEl) => { slideEl.classList.remove( params.slideVisibleClass, + params.slideFullyVisibleClass, params.slideActiveClass, params.slideNextClass, params.slidePrevClass, diff --git a/src/core/defaults.mjs b/src/core/defaults.mjs index 3cf5ba53e..4db99e4ce 100644 --- a/src/core/defaults.mjs +++ b/src/core/defaults.mjs @@ -124,6 +124,7 @@ export default { slideClass: 'swiper-slide', slideActiveClass: 'swiper-slide-active', slideVisibleClass: 'swiper-slide-visible', + slideFullyVisibleClass: 'swiper-slide-fully-visible', slideNextClass: 'swiper-slide-next', slidePrevClass: 'swiper-slide-prev', wrapperClass: 'swiper-wrapper', diff --git a/src/core/update/updateSlidesProgress.mjs b/src/core/update/updateSlidesProgress.mjs index 602b74956..f945e1295 100644 --- a/src/core/update/updateSlidesProgress.mjs +++ b/src/core/update/updateSlidesProgress.mjs @@ -12,7 +12,7 @@ export default function updateSlidesProgress(translate = (this && this.translate // Visible Slides slides.forEach((slideEl) => { - slideEl.classList.remove(params.slideVisibleClass); + slideEl.classList.remove(params.slideVisibleClass, params.slideFullyVisibleClass); }); swiper.visibleSlidesIndexes = []; @@ -43,6 +43,10 @@ export default function updateSlidesProgress(translate = (this && this.translate (slide.swiperSlideSize + spaceBetween); const slideBefore = -(offsetCenter - slideOffset); const slideAfter = slideBefore + swiper.slidesSizesGrid[i]; + + const isFullyVisible = + slideBefore >= 0 && slideBefore <= swiper.size - swiper.slidesSizesGrid[i]; + const isVisible = (slideBefore >= 0 && slideBefore < swiper.size - 1) || (slideAfter > 1 && slideAfter <= swiper.size) || @@ -52,6 +56,9 @@ export default function updateSlidesProgress(translate = (this && this.translate swiper.visibleSlidesIndexes.push(i); slides[i].classList.add(params.slideVisibleClass); } + if (isFullyVisible) { + slides[i].classList.add(params.slideFullyVisibleClass); + } slide.progress = rtl ? -slideProgress : slideProgress; slide.originalProgress = rtl ? -originalSlideProgress : originalSlideProgress; } diff --git a/src/swiper-vue.d.ts b/src/swiper-vue.d.ts index 996c0ece4..3a7b9c9cb 100644 --- a/src/swiper-vue.d.ts +++ b/src/swiper-vue.d.ts @@ -302,6 +302,10 @@ declare const Swiper: DefineComponent< type: StringConstructor; default: undefined; }; + slideFullyVisibleClass: { + type: StringConstructor; + default: undefined; + }; slideNextClass: { type: StringConstructor; default: undefined; diff --git a/src/types/swiper-options.d.ts b/src/types/swiper-options.d.ts index 53ffe720f..dcbf573f6 100644 --- a/src/types/swiper-options.d.ts +++ b/src/types/swiper-options.d.ts @@ -774,7 +774,7 @@ export interface SwiperOptions { slideActiveClass?: string; /** - * CSS class name of currently visible slide + * CSS class name of currently/partially visible slide * * @default 'swiper-slide-visible' * @@ -784,6 +784,15 @@ export interface SwiperOptions { */ slideVisibleClass?: string; + /** + * CSS class name of fully (when whole slide is in the viewport) visible slide + * + * @default 'swiper-slide-fully-visible' + * + * @note Not supported in Swiper React/Vue + */ + slideFullyVisibleClass?: string; + /** * CSS class name of slide which is right after currently active slide * diff --git a/src/vue/swiper.mjs b/src/vue/swiper.mjs index 665559b94..d90ef84ae 100644 --- a/src/vue/swiper.mjs +++ b/src/vue/swiper.mjs @@ -102,6 +102,7 @@ const Swiper = { slideClass: { type: String, default: undefined }, slideActiveClass: { type: String, default: undefined }, slideVisibleClass: { type: String, default: undefined }, + slideFullyVisibleClass: { type: String, default: undefined }, slideNextClass: { type: String, default: undefined }, slidePrevClass: { type: String, default: undefined }, wrapperClass: { type: String, default: undefined },