swiper coverflow 3D轮播图

基于 swiper8 的 coverflow 效果实现的3D轮播图，cover flow是苹果首创的将多首歌曲的封面以3D界面的形式显示出来的方式，效果非常不错。插件适合个人网站作品介绍使用或者企业网站作为产品展示。

1、引入css

<link href="http://www.5imoban.net/download/swiper/swiper-8.4.6.min.css" rel="stylesheet">
<link href="./css/custom.css" rel="stylesheet">

2、html

<div class="hxz-swiper-wrap">
  <div class="hxz-swiper swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
      <img src="./img/fengmian1.png">
      <h3>Eternal Gate</h3>
      <span>Author: S</span>
      <a class="btn" href="http://www.5imoban.net" target="_blank" title="网页模板">Start reading →</a>
      </div>
      <div class="swiper-slide">
      <img src="./img/fengmian2.png">
      <h3>It takes time to revive</h3>
      <span>Author: S</span>
      <a class="btn" href="http://www.5imoban.net" target="_blank" title="网页模板">Start reading →</a>
      </div>
      <div class="swiper-slide">
      <img src="./img/fengmian3.png">
      <h3>Eternal Gate</h3>
      <span>Author: S</span>
      <a class="btn" href="http://www.5imoban.net" target="_blank" title="网页模板">Start reading →</a>
      </div>
      <div class="swiper-slide">
      <img src="./img/fengmian4.png">
      <h3>The law of eternal lift</h3>
      <span>Author: S</span>
      <a class="btn" href="http://www.5imoban.net" target="_blank" title="网页模板">Start reading →</a>
      </div>
      <div class="swiper-slide">
      <img src="./img/fengmian5.png">
      <h3>The lord of rings</h3>
      <span>Author: S</span>
      <a class="btn" href="http://www.5imoban.net" target="_blank" title="网页模板">Start reading →</a>
      </div>
    </div>
  </div>
  <div class="btns prev-button"></div>
  <div class="btns next-button"></div>
</div>

3、引入swiperjs

<script type="text/javascript" src="http://www.5imoban.net/download/swiper/swiper-8.4.6.min.js"></script>

4、调用插件

var swiper = new Swiper('.hxz-swiper', {
  effect: 'coverflow',
  slidesPerView: 3,
  loop: true,
  centeredSlides: true,
  spaceBetween: 10,
  coverflowEffect: {
    rotate: 30,
    stretch: 50,
    depth: 100,
    modifier: 1,
    slideShadows : true
  },
  navigation: {
    nextEl: '.next-button',
    prevEl: '.prev-button',
  },
});

参数说明：

effect：效果，这里用'coverflow'，3D轮播

slidesPerView：展示数量

loop：循环

centeredSlides：默认显示中间一张

spaceBetween：每个slider之间的间距

coverflowEffect：coverflow独立参数

coverflowEffect.rotate: slide做3d旋转时Y轴的旋转角度。默认50。

coverflowEffect.stretch: 每个slide之间的拉伸值（距离），越大slide靠得越紧。 默认0。

coverflowEffect.depth: slide的位置深度。值越大z轴距离越远，看起来越小。 默认100。

coverflowEffect.modifier: depth和rotate和stretch的倍率，相当于depth*modifier、rotate*modifier、stretch*modifier，值越大这三个参数的效果越明显。默认1。

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

navigation：上翻下翻按钮