diff --git a/src/modules/effect-cards/effect-cards.js b/src/modules/effect-cards/effect-cards.js index 84984f584..20c0b640e 100644 --- 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 index ec96e16d2..3205a5970 100644 --- 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 *