Swiper Effects(切换特效) - creativeEffect

设置 effect'creative' 后开启创意切换。由于创意切换的Slide 全部层叠在当前窗口,因此你还需要设置creativeEffect来制作想要的效果。
参数名 类型 默认 描述
prev 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'
next 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 1 设置progress应用的数量限制(变形数量)。默认1,上一页/下一页之后的所有Slide都具有相同的状态。如果设置2,则前/后第二张开始的所有Slide具有相同的状态。
举例:prev位移-200,next位移300,limitProgress设置3,那么Slide可能为
-600 -600 -400 -200 0(active) 300 600 900 900 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>