diff --git a/src/modules/effect-custom/effect-custom.js b/src/modules/effect-custom/effect-custom.js index 096ae5f3b..2f52058da 100644 --- a/src/modules/effect-custom/effect-custom.js +++ b/src/modules/effect-custom/effect-custom.js @@ -2,6 +2,8 @@ export default function EffectCustom({ swiper, extendParams, on }) { extendParams({ customEffect: { transformEl: null, + limitProgress: 1, + perspective: false, prev: { translate: [0, 0, 0], rotate: [0, 0, 0], @@ -27,7 +29,10 @@ export default function EffectCustom({ swiper, extendParams, on }) { const params = swiper.params.customEffect; for (let i = 0; i < slides.length; i += 1) { const $slideEl = slides.eq(i); - const progress = Math.min(Math.max($slideEl[0].progress, -1), 1); + const progress = Math.min( + Math.max($slideEl[0].progress, -params.limitProgress), + params.limitProgress, + ); const offset = $slideEl[0].swiperSlideOffset; const t = [swiper.params.cssMode ? -offset - swiper.translate : -offset, 0, 0]; const r = [0, 0, 0]; @@ -112,7 +117,9 @@ export default function EffectCustom({ swiper, extendParams, on }) { on('beforeInit', () => { if (swiper.params.effect !== 'custom') return; swiper.classNames.push(`${swiper.params.containerModifierClass}custom`); - swiper.classNames.push(`${swiper.params.containerModifierClass}3d`); + if (swiper.params.customEffect.perspective) { + swiper.classNames.push(`${swiper.params.containerModifierClass}3d`); + } const overwriteParams = { watchSlidesProgress: true, virtualTranslate: !swiper.params.cssMode, diff --git a/src/types/modules/effect-custom.d.ts b/src/types/modules/effect-custom.d.ts index a63874e41..c4be5b3b7 100644 --- a/src/types/modules/effect-custom.d.ts +++ b/src/types/modules/effect-custom.d.ts @@ -1,10 +1,10 @@ import { CSSSelector } from '../shared'; interface CustomEffectTransform { - translate: string[] | number[]; - rotate: number[]; - opacity: number; - scale: number; + translate?: string[] | number[]; + rotate?: number[]; + opacity?: number; + scale?: number; } export interface CustomEffectMethods {} @@ -51,4 +51,16 @@ export interface CustomEffectOptions { * @default null */ transformEl?: CSSSelector; + /** + * Limit progress/offset to amount of side slides. If `1`, then slides all slides after prev/next will have same state. If `2`, then all slides after 2nd before/after active will have same state, etc. + * + * @default 1 + */ + limitProgress?: number; + /** + * Enable this parameter if your custom transforms require 3D transformations (`translateZ`, `rotateX`, `rotateY` ) + * + * @default false + */ + perspective?: boolean; }