html5 coverflow,关于swiper 4的coverflowEffect（3d）

轮播效果：

html:

js:

new swiper('.successful_swiper', {

autoplay: {

disableoninteraction: false, // 鼠标滑动后继续自动播放

delay: 4000, //4秒切换一次

},

speed: 1000, //切换过渡速度

effect: 'coverflow',

loop: true,

slidesperview: "auto",

centeredslides: true, //设置slide居中

// spacebetween: 10,

coverfloweffect: {

rotate: 0, //slide做3d旋转时y轴的旋转角度。默认50。

stretch: -30, //每个slide之间的拉伸值(距离)，越大slide靠得越紧。 默认0。

depth: 100, //slide的位置深度。值越大z轴距离越远，看起来越小。 默认100。

modifier: 1, //depth和rotate和stretch的倍率，相当于 depth*modifier、rotate*modifier、stretch*modifier，值越大这三个参数的效果越明显。默认1。

slideshadows: false //开启slide阴影。默认 true。

},

pagination: {

el: '.successful_pagination',

clickable: true,

},

});