diff --git a/package-lock.json b/package-lock.json index a6271a372..18b99a838 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "swiper-src", - "version": "7.0.0-alpha.34", + "version": "7.0.0-alpha.35", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index d42427bf7..4f634d5a2 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "swiper-src", - "version": "7.0.0-alpha.34", + "version": "7.0.0-alpha.35", "description": "Most modern mobile touch slider and framework with hardware accelerated transitions", "scripts": { "build:dev": "node scripts/build", diff --git a/package/package.json b/package/package.json index 10d67332b..00cf4be07 100644 --- a/package/package.json +++ b/package/package.json @@ -1,6 +1,6 @@ { "name": "swiper", - "version": "7.0.0-alpha.34", + "version": "7.0.0-alpha.35", "description": "Most modern mobile touch slider and framework with hardware accelerated transitions", "typings": "swiper.d.ts", "type": "module", diff --git a/src/modules/effect-creative/effect-creative.js b/src/modules/effect-creative/effect-creative.js index 05722bf44..1bc52b99d 100644 --- a/src/modules/effect-creative/effect-creative.js +++ b/src/modules/effect-creative/effect-creative.js @@ -8,6 +8,7 @@ export default function EffectCreative({ swiper, extendParams, on }) { creativeEffect: { transformEl: null, limitProgress: 1, + progressMultiplier: 1, perspective: true, prev: { translate: [0, 0, 0], @@ -32,6 +33,7 @@ export default function EffectCreative({ swiper, extendParams, on }) { const setTranslate = () => { const { slides } = swiper; const params = swiper.params.creativeEffect; + const { progressMultiplier: multiplier } = params; for (let i = 0; i < slides.length; i += 1) { const $slideEl = slides.eq(i); const slideProgress = $slideEl[0].progress; @@ -63,12 +65,12 @@ export default function EffectCreative({ swiper, extendParams, on }) { // set translate t.forEach((value, index) => { t[index] = `calc(${value}px + (${getTranslateValue(data.translate[index])} * ${Math.abs( - progress, + progress * multiplier, )}))`; }); // set rotates r.forEach((value, index) => { - r[index] = data.rotate[index] * Math.abs(progress); + r[index] = data.rotate[index] * Math.abs(progress * multiplier); }); $slideEl[0].style.zIndex = -Math.abs(Math.round(slideProgress)) + slides.length; @@ -77,10 +79,12 @@ export default function EffectCreative({ swiper, extendParams, on }) { const rotateString = `rotateX(${r[0]}deg) rotateY(${r[1]}deg) rotateZ(${r[2]}deg)`; const scaleString = progress < 0 - ? `scale(${1 + (1 - data.scale) * progress})` - : `scale(${1 - (1 - data.scale) * progress})`; + ? `scale(${1 + (1 - data.scale) * progress * multiplier})` + : `scale(${1 - (1 - data.scale) * progress * multiplier})`; const opacityString = - progress < 0 ? 1 + (1 - data.opacity) * progress : 1 - (1 - data.opacity) * progress; + progress < 0 + ? 1 + (1 - data.opacity) * progress * multiplier + : 1 - (1 - data.opacity) * progress * multiplier; const transform = `translate3d(${translateString}) ${rotateString} ${scaleString}`; // Set shadows diff --git a/src/types/modules/effect-creative.d.ts b/src/types/modules/effect-creative.d.ts index 5c787d278..b42e4a30d 100644 --- a/src/types/modules/effect-creative.d.ts +++ b/src/types/modules/effect-creative.d.ts @@ -72,6 +72,12 @@ export interface CreativeEffectOptions { * @default 1 */ limitProgress?: number; + /** + * Allows to multiply slides transformations and opacity. + * + * @default 1 + */ + progressMultipler?: number; /** * Enable this parameter if your custom transforms require 3D transformations (`translateZ`, `rotateX`, `rotateY` ) *