# Effects （切换效果）

# effect

类型：string
默认：slide
可选值：slide（普通位移切换）,fade（淡入）,cube（方块）,coverflow（3d流）,flip（3d翻转）,cards（卡片式）,creative（创意性）。

设置Slide的切换效果

options: {
	effect: 'fade'
},

# fadeEffect

fade效果参数。可选参数：crossFade。

默认：false。关闭淡出。过渡时，原slide透明度为1（不淡出），过渡中的slide透明度从0->1（淡入），其他slide透明度0。

可选值：true。开启淡出。过渡时，原slide透明度从1->0（淡出），过渡中的slide透明度从0->1（淡入），其他slide透明度0。

当你的slide中图片大小不同时可以用到。

类型：object

options: {
	effect : 'fade',
    fadeEffect: {
      crossFade: true,
    }
},

# cubeEffect

cube效果参数，可选值：

slideShadows：开启slide阴影。默认 true。

shadow：开启投影。默认 true。

shadowOffset：投影距离。默认 20，单位px。

shadowScale：投影缩放比例。默认0.94。

类型：object

options: {
	effect : 'cube',
    cubeEffect: {
      slideShadows: true,
      shadow: true,
      shadowOffset: 100,
      shadowScale: 0.6
    },
},

# coverflowEffect

类型：object

coverflow效果参数，可选值：

参数名	默认	描述
rotate	50	slide做3d旋转时Y轴的旋转角度
stretch	0	每个slide之间的拉伸值，越大slide靠得越紧。可使用%百分比
depth	100	slide的位置深度。值越大z轴距离越远，看起来越小。
modifier	1	depth和rotate和stretch的倍率，相当于depthmodifier、rotatemodifier、stretch*modifier，值越大这三个参数的效果越明显。

options: {
	effect : 'coverflow',
    slidesPerView: 3,
    centeredSlides: true,
    coverflowEffect: {
      rotate: 30,
      stretch: 10,
      depth: 60,
      modifier: 2
    },
},

# flipEffect

类型：object

3d翻转参数：

limitRotation：限制最大旋转角度为180度，默认true。

options: {
	effect : 'flip',
    flipEffect: {
      limitRotation: true,
    }
},

# cardsEffect

类型：object

卡片参数：

rotate：卡片是否发生旋转偏移，默认为true。

perSlideOffset：每张幻灯片的偏移距离，默认为8。

perSlideRotate：每张幻灯片的旋转角度，默认为2。

options: {
	effect: 'cards',
    cardsEffect: {
        rotate: false,
        perSlideOffset: 8,
        perSlideRotate: 2
	}
},

# creativeEffect

类型：object

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

参数名	类型	默认	描述
prev	CreativeEffectTransform		prve(左、上)Slide的变形方式
next	CreativeEffectTransform		next(右、下)Slide的变形方式
limitProgress	number	1	设置progress应用的数量限制（变形数量）。默认1，上一页/下一页之后的所有Slide都具有相同的状态。如果设置2，则前/后第二张开始的所有Slide具有相同的状态。
perspective	boolean	true	开启景深。如果你的切换包含3D变形(translateZ, rotateX, rotateY )时不可禁止此参数。
progressMultiplier	number	1	设置progress的乘数（变形强度）。例如效果是200，乘数为2则效果变成了400。

prev参数详情：

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

next参数详情：

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

← Pagination （分页器）