feat(cards-effect): add slide shadow

nolimits4web · Aug 11, 2021 · 09666c8 · 09666c8
1 parent 0d2a349
commit 09666c8
Show file tree

Hide file tree

Showing 7 changed files with 39 additions and 22 deletions.
diff --git a/src/core/core.less b/src/core/core.less
@@ -62,13 +62,15 @@
   }
   .swiper-wrapper,
   .swiper-slide,
+  .swiper-slide-shadow,
   .swiper-slide-shadow-left,
   .swiper-slide-shadow-right,
   .swiper-slide-shadow-top,
   .swiper-slide-shadow-bottom,
   .swiper-cube-shadow {
     transform-style: preserve-3d;
   }
+  .swiper-slide-shadow,
   .swiper-slide-shadow-left,
   .swiper-slide-shadow-right,
   .swiper-slide-shadow-top,
@@ -81,6 +83,9 @@
     pointer-events: none;
     z-index: 10;
   }
+  .swiper-slide-shadow {
+    background: rgba(0, 0, 0, 0.1);
+  }
   .swiper-slide-shadow-left {
     background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
   }

diff --git a/src/modules/effect-cards/effect-cards.js b/src/modules/effect-cards/effect-cards.js
@@ -1,8 +1,10 @@
+import createShadow from '../../shared/create-shadow.js';
 import virtualEffectTransitionEnd from '../../shared/virtual-effect-transition-end.js';
 
 export default function EffectCards({ swiper, extendParams, on }) {
   extendParams({
     cardsEffect: {
+      slideShadows: true,
       transformEl: null,
     },
   });
@@ -74,11 +76,22 @@ export default function EffectCards({ swiper, extendParams, on }) {
         scale(${scaleString})
       `;
 
+      if (params.slideShadows) {
+        // Set shadows
+        let $shadowEl = $slideEl.find('.swiper-slide-shadow');
+        if ($shadowEl.length === 0) {
+          $shadowEl = createShadow(params, $slideEl);
+        }
+        if ($shadowEl.length)
+          $shadowEl[0].style.opacity = Math.min(Math.max(Math.abs(progress), 0), 1);
+      }
+
       $slideEl[0].style.zIndex = -Math.abs(Math.round(slideProgress)) + slides.length;
       if (params.transformEl) {
         $slideEl
           .find(params.transformEl)
           .css({
+            'transform-origin': 'center-bottom',
             'backface-visibility': 'hidden',
             '-webkit-backface-visibility': 'hidden',
           })
@@ -92,7 +105,7 @@ export default function EffectCards({ swiper, extendParams, on }) {
   const setTransition = (duration) => {
     const { transformEl } = swiper.params.cardsEffect;
     const $transitionElements = transformEl ? swiper.slides.find(transformEl) : swiper.slides;
-    $transitionElements.transition(duration);
+    $transitionElements.transition(duration).find('.swiper-slide-shadow').transition(duration);
 
     virtualEffectTransitionEnd({ swiper, duration, transformEl });
   };

diff --git a/src/modules/effect-cards/effect-cards.less b/src/modules/effect-cards/effect-cards.less
@@ -3,5 +3,6 @@
   .swiper-slide {
     transform-origin: center bottom;
     backface-visibility: hidden;
+    overflow: hidden;
   }
 }
diff --git a/src/modules/effect-coverflow/effect-coverflow.js b/src/modules/effect-coverflow/effect-coverflow.js
@@ -1,4 +1,4 @@
-import $ from '../../shared/dom.js';
+import createShadow from '../../shared/create-shadow.js';
 
 export default function EffectCoverflow({ swiper, extendParams, on }) {
   extendParams({
@@ -13,15 +13,6 @@ export default function EffectCoverflow({ swiper, extendParams, on }) {
     },
   });
 
-  const createShadow = (params, $slideEl, side) => {
-    const $shadowEl = $(`<div class="swiper-slide-shadow-${side}"></div>`);
-    if (params.transformEl) {
-      $slideEl.find(params.transformEl).append($shadowEl);
-    } else {
-      $slideEl.append($shadowEl);
-    }
-    return $shadowEl;
-  };
   const setTranslate = () => {
     const { width: swiperWidth, height: swiperHeight, slides, slidesSizesGrid } = swiper;
     const params = swiper.params.coverflowEffect;

diff --git a/src/modules/effect-flip/effect-flip.js b/src/modules/effect-flip/effect-flip.js
@@ -1,4 +1,4 @@
-import $ from '../../shared/dom.js';
+import createShadow from '../../shared/create-shadow.js';
 import virtualEffectTransitionEnd from '../../shared/virtual-effect-transition-end.js';
 
 export default function EffectFlip({ swiper, extendParams, on }) {
@@ -10,16 +10,6 @@ export default function EffectFlip({ swiper, extendParams, on }) {
     },
   });
 
-  const createShadow = (params, $slideEl, side) => {
-    const $shadowEl = $(`<div class="swiper-slide-shadow-${side}"></div>`);
-    if (params.transformEl) {
-      $slideEl.find(params.transformEl).append($shadowEl);
-    } else {
-      $slideEl.append($shadowEl);
-    }
-    return $shadowEl;
-  };
-
   const setTranslate = () => {
     const { slides, rtlTranslate: rtl } = swiper;
     const params = swiper.params.flipEffect;

diff --git a/src/shared/create-shadow.js b/src/shared/create-shadow.js
@@ -0,0 +1,11 @@
+import $ from './dom.js';
+
+export default function createShadow(params, $slideEl, side) {
+  const $shadowEl = $(`<div class="swiper-slide-shadow${side ? `-${side}` : ''}"></div>`);
+  if (params.transformEl) {
+    $slideEl.find(params.transformEl).append($shadowEl);
+  } else {
+    $slideEl.append($shadowEl);
+  }
+  return $shadowEl;
+}
diff --git a/src/types/modules/effect-cards.d.ts b/src/types/modules/effect-cards.d.ts
@@ -5,6 +5,12 @@ export interface CardsEffectMethods {}
 export interface CardsEffectEvents {}
 
 export interface CardsEffectOptions {
+  /**
+   * Enables slides shadows
+   *
+   * @default true
+   */
+  slideShadows?: boolean;
   /**
    * CSS selector of the element inside of the slide to transform instead of the slide itself. Useful to use with cssMode
    *