feat: add fully visible slides classes

fixes #6773
nolimits4web · Sep 29, 2023 · 902a4c4 · 902a4c4
1 parent 2a99dbd
commit 902a4c4
Show file tree

Hide file tree

Showing 7 changed files with 26 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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 },