需要写一个下图这样的轮播效果，使用的是 Swiper 4.3 ，在使用过程中遇到了几个问题，记录一下。
具体的初始化及使用方法请参见：Swiper4.x 使用方法 Swiper4.x API
我首先想到的是使用 Swiper 的 Effect: 'coverflowEffect' 效果。
默认参数：
代码语言：javascript复制<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
effect : 'coverflow',
slidesPerView: 3,
centeredSlides: true,
coverflowEffect: {
rotate: 30,
stretch: 10,
depth: 60,
modifier: 2,
slideShadows : true
},
})
</script>参数介绍：
rotate：slide做3d旋转时Y轴的旋转角度。默认50。
stretch：每个slide之间的拉伸值，越大slide靠得越紧。 默认0。
depth：slide的位置深度。值越大z轴距离越远，看起来越小。 默认100。
modifier：depth和rotate和stretch的倍率，相当于depth*modifier、rotate*modifier、stretch*modifier，值越大这三个参数的效果越明显。默认1。
slideShadows：开启slide阴影。默认 true。
效果图：
我们将 rotate 的值设为 0 ，depth 的值设高一点，好像就能实现图1的效果了。
修改后的部分参数：
代码语言：javascript复制coverflowEffect: {
rotate: 0,
stretch: 10,
depth: 160,
modifier: 2,
slideShadows : true
},效果如图：
但是，3张图好像看不出什么问题，如果再加几张呢？结果会变成下图这样：
可是我不想让他显示这么多，只让它显示3个，怎么办？
我们可以看到默认参数里有一项 slidesPerView: 3, 它的意思是，设置 slider 容器同时显示 slides 的数量，简单地说就是总宽度 swiper-wrapper 除以单个 swiper-slide 的宽度所得到的数值。
我想应该是该效果下，对后面的 sliders 进行了缩放，宽度小于设置的宽度，才会显示多个。
我把 slidesPerView 的值设置为 2 ，就可以只显示3个了，您可以根据自己的情况进行设置。
还有一个问题，就是默认情况下，第一个是居中显示的，这样前面就会有一块空白。
怎么让它补齐空白，直接显示第二个呢？
我们可以用 initialSlide 属性，设定初始化时 slide 的索引。这里的数值是根据下标判断的，我们要直接显示第二个， 可以将它的设置为 1 。
js中添加下面一行：
代码语言：javascript复制initialSlide: 1,最终代码：
代码语言：javascript复制<script language="javascript">
var mySwiper = new Swiper('.swiper-container', {
effect: 'coverflow',
slidesPerView: 2,
centeredSlides: true,
initialSlide: 1,
coverflowEffect: {
rotate: 0,
stretch: 10,
depth: 160,
modifier: 2,
slideShadows: true
},// 如果需要前进后退按钮
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
})
</script>效果图：
当然也可以把 前进/后退 按钮拿出来，可以参考我之前的文章：
使用 swiper 轮播插件遇到的问题及解决方法
声明：本文由w3h5原创，转载请注明出处：《使用swiper的coverflowEffect遇到的几个问题》 https://cloud.tencent.com/developer/article/1538489
