feat(custom-effect): add limitProgress and perspective options

nolimits4web · Aug 11, 2021 · 1c7d49e · 1c7d49e
1 parent ebf0abd
commit 1c7d49e
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 6 deletions.
diff --git 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
@@ -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;
 }