使用swiper的coverflowEffect遇到的几个问题

使用swiper的coverflowEffect遇到的几个问题

需要写一个下图这样的轮播效果，使用的是 Swiper 4.3 ，在使用过程中遇到了几个问题，记录一下。

具体的初始化及使用方法请参见：Swiper4.x 使用方法  Swiper4.x API

我首先想到的是使用 Swiper 的 Effect: 'coverflowEffect' 效果。

默认参数：

<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的倍率，相当于depthmodifier、rotatemodifier、stretch*modifier，值越大这三个参数的效果越明显。默认1。

slideShadows：开启slide阴影。默认 true。

效果图：

我们将 rotate 的值设为 0 ，depth 的值设高一点，好像就能实现图1的效果了。

修改后的部分参数：

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中添加下面一行：

initialSlide: 1

最终代码：

<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://www.w3h5.com/post/114.html