Swiper Effects(切换特效) - coverflowEffect

cover flow是类似于苹果将多首歌曲的封面以3D界面的形式显示出来的方式。coverflow效果参数,可选值:
参数名 默认 描述
rotate 50 slide做3d旋转时Y轴的旋转角度
stretch 0 每个slide之间的拉伸值,越大slide靠得越紧。5.3.6 后可使用%百分比
depth 100 slide的位置深度。值越大z轴距离越远,看起来越小。
modifier 1 depth和rotate和stretch的倍率,相当于depth*modifier、rotate*modifier、stretch*modifier,值越大这三个参数的效果越明显。
slideShadows true 是否开启slide阴影

coverflowEffect信息

类型:
object
启用版本:
3.0.0

效果演示

slider1
slider2
slider3
slider4
slider5
slider6
slider7
slider8
slider9

使用方法示例

从Swiper7开始,容器默认类名由'.swiper-container'变更为'.swiper'。
<script language="javascript"> 
var mySwiper = new Swiper('.swiper',{
  effect : 'coverflow',
  slidesPerView: 3,
  centeredSlides: true,
  coverflowEffect: {
    rotate: 30,
    stretch: 10,
    depth: 60,
    modifier: 2,
    slideShadows : true
  },
})
</script>
查看中企动力官网的coverflowEffect 应用例子