feat(cards-effect): add perSlideRotate and perSlideOffset parameters

fixes #5939
nolimits4web · Aug 12, 2022 · db08a70 · db08a70
1 parent d1f7582
commit db08a70
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 2 deletions.
diff --git a/src/modules/effect-cards/effect-cards.js b/src/modules/effect-cards/effect-cards.js
@@ -9,6 +9,8 @@ export default function EffectCards({ swiper, extendParams, on }) {
       slideShadows: true,
       transformEl: null,
       rotate: true,
+      perSlideRotate: 2,
+      perSlideOffset: 8,
     },
   });
 
@@ -32,9 +34,9 @@ export default function EffectCards({ swiper, extendParams, on }) {
       let tY = 0;
       const tZ = -100 * Math.abs(progress);
       let scale = 1;
-      let rotate = -2 * progress;
+      let rotate = -params.perSlideRotate * progress;
 
-      let tXAdd = 8 - Math.abs(progress) * 0.75;
+      let tXAdd = params.perSlideOffset - Math.abs(progress) * 0.75;
 
       const slideIndex =
         swiper.virtual && swiper.params.virtual.enabled ? swiper.virtual.from + i : i;

diff --git a/src/types/modules/effect-cards.d.ts b/src/types/modules/effect-cards.d.ts
@@ -11,12 +11,28 @@ export interface CardsEffectOptions {
    * @default true
    */
   slideShadows?: boolean;
+
   /**
    * Enables cards rotation
    *
    * @default true
    */
   rotate?: boolean;
+
+  /**
+   * Rotate angle per slide (in degrees)
+   *
+   * @default 2
+   */
+  perSlideRotate?: number;
+
+  /**
+   * Offset distance per slide (in px)
+   *
+   * @default 8
+   */
+  perSlideOffset?: number;
+
   /**
    * CSS selector of the element inside of the slide to transform instead of the slide itself. Useful to use with cssMode
    *