creativeEffect

设置 effect 为 'creative' 后开启创意切换。由于创意切换的Slide 全部层叠在当前窗口，因此你还需要设置creativeEffect来制作想要的效果。

参数名类型默认描述

CreativeEffectTransform

prve(左、上)Slide的变形方式。可接受以下参数

translate: (string | number)[]; // 位移，例如["5%", 0, -200]
rotate?: number[]; //旋转，单位deg，例如[0, -100, 90]
opacity?: number; //透明度
scale?: number;  //缩放
shadow?: boolean;  //Slide内部阴影
origin?: string;  //变形中心点，例如'left bottom'

CreativeEffectTransform

next(右、下)Slide的变形方式。可接受以下参数

translate: (string | number)[]; // 位移，例如["5%", 0, -200]
rotate?: number[]; //旋转，单位deg，例如[0, -100, 90]
opacity?: number; //透明度
scale?: number;  //缩放
shadow?: boolean;  //Slide内部阴影
origin?: string;  //变形中心点，例如'left bottom'

limitProgress

number

设置progress应用的数量限制（变形数量）。默认1，上一页/下一页之后的所有Slide都具有相同的状态。如果设置2，则前/后第二张开始的所有Slide具有相同的状态。
举例：prev位移-200，next位移300，limitProgress设置3，那么Slide可能为

-600

-400

-200

0(active)

300

600

900

perspective boolean true 开启景深。如果你的切换包含3D变形(translateZ, rotateX, rotateY )时不可禁止此参数。

progressMultiplier number 1 设置progress的乘数（变形强度）。例如效果是200，乘数为2则效果变成了400。

shadowPerProgress boolean false 是否开启阴影跟随progress。此功能需要和limitProgress一起使用。
默认false，所有阴影透明度都是1。如果开启并设置limitProgress为4，那么每个Slide的阴影的透明度将变成0.25、0.5、0.75、1，颜色逐渐加深。

transformEl CSSSelector null 要转换的Slides内部元素的 CSS 选择器，而不是Slides本身。在 cssMode 中使用比较有效。

creativeEffect信息

类型：: object
启用版本：: 7.0.0

效果演示

slider1

slider2

slider3

slider4

slider5

slider6

使用方法示例

从Swiper7开始，容器默认类名由'.swiper-container'变更为'.swiper'。

<script language="javascript">
  var mySwiper = new Swiper('.swiper',{
    effect : 'creative',
    creativeEffect: {
      prev: {
        shadow: true,
        origin: "left center",
        translate: ["-5%", 0, -200],
        rotate: [0, 100, 0],
      },
      next: {
        origin: "right center",
        translate: ["5%", 0, -200],
        rotate: [0, -100, 0],
      },
    },
  })
</script>

转载原创文章请注明：文章转载自：Swiper中文网 [https://www.swiper.com.cn]
本文地址：https://www.swiper.com.cn/api/effects/482.html

上一篇：cardsEffect

下一篇：没有了

配置选项

creativeEffect

creativeEffect信息

效果演示

使用方法示例

网友求助