# 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'