切换效果：coverflow 封面轮播图

---

前言

coverflow封面轮播图主要常用在一些音乐播放网站，或者视频网站中，主要是通过放大正在轮播的图片，从而实现捕获用户的眼球，减少其他未轮播到的轮播图视觉上的干扰，本文我们就通过 swiper库来简单实现一下。

---

一、最终效果

先来看一下我们的最终效果：

二、swiper库的引入

在 swiper中内置了四种轮播的样式，可设置为’slide’（普通切换、默认）,“fade”（淡入）“cube”（方块）“coverflow”（3d流）“flip”（3d翻转）。然后 coverflow和我们要实现的效果相似，可以通过设置了 coverflow效果，然后再来调整。

coverflow效果参数，可选值：（属性名，coverflowEffect，启用版本4.0.0）

参数名	默认	描述
rotate	50	slide做3d旋转时Y轴的旋转角度
stretch	0	每个slide之间的拉伸值，越大slide靠得越紧。5.3.6 后可使用%百分比
depth	100	slide的位置深度。值越大z轴距离越远，看起来越小。
modifier	1	depth和rotate和stretch的倍率，相当于depthmodifier、rotatemodifier、stretch*modifier，值越大这三个参数的效果越明显。
slideShadows	true	是否开启slide阴影

<!-- swiper库版本 4.5.1 -->
<link href="https://cdn.bootcdn.net/ajax/libs/Swiper/4.5.1/css/swiper.css" rel="stylesheet" />
<script src="https://cdn.bootcdn.net/ajax/libs/Swiper/4.5.1/js/swiper.js"></script>

三、代码复现

1. html主体

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide one">Slide 1</div>
    <div class="swiper-slide two">Slide 2</div>
    <div class="swiper-slide three">Slide 3</div>
  </div>
  <!-- 分页器 -->
  <div class="swiper-pagination"></div>
</div>

2. css样式

body,
div {
  margin: 0;
  padding: 0;
}
div.swiper-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 800px;
  height: 800px;
  border-radius: 5px;
}
div.swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #ffffff;
  font-size: 60px;
}
div.one {
  background-color: #34495e;
}
div.two {
  background-color: #d35400;
}
div.three {
  background-color: #16a085;
}

3. js脚本

var mySwiper = new Swiper('.swiper-container', {
  autoplay: true,
  loop: true,
  pagination: {
    el: '.swiper-pagination',
  },
  centeredSlides: true, // 居中显示正在展示的slide，默认是居左对齐。
  slidesPerView: 2, // 一次显示多少个 slide，这里因为 coverflowEffect子参数设定，设置为3的时候是不能够充满父盒子的，所以要比真正显示的盒子少才行。
  effect: 'coverflow', // 轮播效果
  coverflowEffect: {
    // coverflow 效果细节调整
    rotate: 0,
    stretch: 50,
    depth: 350,
  },
});

---

总结

总结；以上便是今天实现的 coverflow效果，关于参数这块可以根据项目实际需要进行调整。

最后，如果您有更好的方法，欢迎在留言区中分享；或者实际操作中遇到什么问题均可留言或者私信我，感谢您的观看！
官方文档：Swiper