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

使用swiper的coverflowEffect遇到的几个问题 经验总结 第1张

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

使用swiper的coverflowEffect遇到的几个问题 经验总结 第2张

具体的初始化及使用方法请参见: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的倍率,相当于depth*modifier、rotate*modifier、stretch*modifier,值越大这三个参数的效果越明显。默认1。

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

效果图:

使用swiper的coverflowEffect遇到的几个问题 经验总结 第3张

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

修改后的部分参数:

coverflowEffect: {
    rotate: 0,
    stretch: 10,
    depth: 160,
    modifier: 2,
    slideShadows : true
},

效果如图:

使用swiper的coverflowEffect遇到的几个问题 经验总结 第4张

但是,3张图好像看不出什么问题,如果再加几张呢?结果会变成下图这样:

使用swiper的coverflowEffect遇到的几个问题 经验总结 第5张

可是我不想让他显示这么多,只让它显示3个,怎么办?

我们可以看到默认参数里有一项 slidesPerView: 3, 它的意思是,设置 slider 容器同时显示 slides 的数量,简单地说就是总宽度 swiper-wrapper 除以单个 swiper-slide 的宽度所得到的数值。

我想应该是该效果下,对后面的 sliders 进行了缩放,宽度小于设置的宽度,才会显示多个。

我把 slidesPerView 的值设置为 2 ,就可以只显示3个了,您可以根据自己的情况进行设置。

使用swiper的coverflowEffect遇到的几个问题 经验总结 第6张

还有一个问题,就是默认情况下,第一个是居中显示的,这样前面就会有一块空白。

使用swiper的coverflowEffect遇到的几个问题 经验总结 第7张

怎么让它补齐空白,直接显示第二个呢?

我们可以用 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的coverflowEffect遇到的几个问题 经验总结 第8张

当然也可以把 前进/后退 按钮拿出来,可以参考我之前的文章:

使用 swiper 轮播插件遇到的问题及解决方法

推荐阅读:

Bootstrap滚动监听不用offset实现向下偏移

Vue.js学习笔记——简介、安装使用

HTML引入文件的绝对路径、相对路径、根目录

HTML页面 用CSS实现禁止选中、复制和右键

jquery导航栏点击及页面跳转后对应栏目添加选中效果

赞 (21)
分享到: +

评论 地板

Avatar

换个身份

  • 昵称 (必填)
  • 邮箱 (选填)
  1. #1
    访客
    大佬,您给帮忙解决个问题么,关于swiper的,事后必有重谢。
    访客 4年前 (2020-09-16)回复 取消评论
    • 访客
      QQ:1635307375
      (不管尺寸是多大)一直让swiper默认显示三个
      访客 4年前 (2020-09-16)回复 取消评论