此次实现是基于swiper 4.5.1
原理
首先我们是基于effect切换效果中的"coverflow"来实现,然后配合coverflowEffect里的一些参数设置,达到上述效果。
参数解析
new Swiper('.swiper-container', {
// 容器能够显示的slide数量,可以用来调节中间slide占比大小(为了达到设计图的尺寸),
// slide不能固定宽度,会影响滑动效果,所以这里用比例调节
slidesPerView: 1.509,
// 当前active的slide居中-最前面的大图
centeredSlides: true,
// 切换效果
effect: 'coverflow',
// 调节参数,慢慢调节,根据以下说明及自己容器的宽高达到想要的效果
coverflowEffect: {
rotate: 0,
stretch: 460,
depth: 400,
modifier: 1.3,
slideShadows: false,
},
})