前言

Swiper对carousel的实现几乎没有一点技术含量，但是使用起来非常方便，包括对移动终端的良好支持。因为简单，这里当然就不详细介绍了。让我们开始这篇文章的主要内容

实施过程：

1.移动终端-要求swiper 4.0.3实现级联轮播

二.效果如下

三.方案：搜索后发现使用swiper可以实现切换效果coverflowEffect

1.coverflow类似于苹果以3D界面的形式展示多首歌曲封面的方式

2.2.coverflow的属性：

旋转：在3d中旋转幻灯片时y轴的旋转角度。默认值为50。拉伸：幻灯片之间的拉伸值越大，幻灯片就越紧。默认为0。深度：幻灯片的位置深度。值越大，z轴越远，看起来越小。默认值为100。修改器：深度和旋转拉伸的比例相当于深度*修改器、旋转*修改器和拉伸*修改器。数值越高，这三个参数的作用越明显。默认值1。幻灯片阴影：打开幻灯片阴影。默认情况下为True。

四.代码：

这个。刮水器=新刮水器('。case-wiper-container '，{居中的幻灯片3360 false，//选择幻灯片以显示initialSlide: 1，///默认的选定项目索引slidesPerView: 1，//自动匹配每次显示的幻灯片数量。在loop='auto '模式下，还需要设置循环幻灯片效果：' c overflow '。//切换效果-3dc溢出效果3360 {旋转： 0，拉伸： 10。depth: 160，modifier: 2，slideShadows: true }，pagination: { el: '。swiper-pagination' }， { init(){ const item=JSON . parse($($(this。$el[0])。查找('。swiper-slide ')[this . activeindex])。attr('数据项')；_this.updateCaseInfo(项目)；}，slideChange() {//旋转幻灯片并更新文本描述const item=JSON.parse ($ ($ (this。$ El [0])。查找('。滑动滑动’)[这个。activeindex])。attr('数据项')；_this.updateCaseInfo(项目)；} } });5.注意：

5.1如果要选择幻灯片进行中心显示，请设置中心幻灯片3360路径；如果您想在默认显示转盘期间移除空白，您可以设置初始幻灯片：1

5.2不要试图控制默认选定项目的宽度和高度，这会影响正常的转盘效果。最终的效果只能通过调整coverflow的相关属性以及swiper容器的宽度和高度来实现

摘要

以上就是本文的全部内容。希望本文的内容对大家的学习或工作有一定的参考价值。有问题可以留言交流。谢谢你的支持。