2020-12-16 swiper 3D轮播

1,安装swiper
    npm install swiper --save
2,引入swiper
    在main.js中引入css
    import "swiper/swiper-bundle.css";（现在安装的试swiper6的版本，不同的swiper版本此处的样式引入不同）
3,注意：
    需要根据自己的需求修改scss样式

<template>
  <div class="home">
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="(item, index) in 10" :key="index">
          <img
            src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1608031931853&di=a030726aab9af43d76116f3374eba0f9&imgtype=0&src=http%3A%2F%2Fa.hiphotos.baidu.com%2Fzhidao%2Fpic%2Fitem%2F37d12f2eb9389b5067938dd98135e5dde6116ec8.jpg"
            alt=""
          />
        </div>
        <div class="swiper-slide">
          <img
            src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2724907369,925086679&fm=26&gp=0.jpg"
            alt=""
          />
        </div>
        <div class="swiper-slide">
          <img
            src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1608032227495&di=15e0af207b06a313b0a9d99e612228f7&imgtype=0&src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20191224%2Fd87623bbe8f447fc911cf22eaf5ad474.jpeg"
            alt=""
          />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import Swiper from "swiper";
  export default {
    components: {},

    data() {
      return {};
    },
    created() {
      this.$nextTick(() => {
        let swiper = new Swiper(".swiper-container", {
          autoplay: 2000, //自动滑动
          speed: 500, //自动滑动开始到结束的时间（单位ms）
          loop: true, //开启循环
          loopedSlides: 3, //在loop模式下使用slidesPerview:'auto',还需使用该参数设置所要用到的loop个数。
          slidesPerView: "auto", //设置slider容器能够同时显示的slides数量(carousel模式)。另外，支持'auto'值，会根据容器container的宽度调整slides数目。
          effect: "coverflow", //可以实现3D效果的轮播,
          pagination: ".swiper-pagination", //分页器
          centeredSlides: true, //设定为true时，active slide会居中，而不是默认状态下的居左。
          coverflow: {
            rotate: 0, //slide做3d旋转时Y轴的旋转角度。默认50。
            stretch: 0, //每个slide之间的拉伸值，越大slide靠得越紧。 默认0。
            depth: 0, //slide的位置深度。值越大z轴距离越远，看起来越小。 默认100。
            modifier: 1, //depth和rotate和stretch的倍率，相当于depth*modifier、rotate*modifier、stretch*modifier，值越大这三个参数的效果越明显。默认1。
            slideShadows: false, //开启slide阴影。默认 true。
          },
        });
      });
    },
  };
</script>
<style lang="scss" scoped>
  .swiper-container {
    width: 100%;
    height: 180px;
  }
  .swiper-slide {
    display: flex;
    overflow: hidden;
    border-radius: 4px;
    height: 180px;
    width: 280px;
    img {
      border-radius: 4px;
      height: 180px;
    }
  }

  .swiper-slide-prev {
    justify-content: flex-end;
    align-items: center;
  }
  .swiper-slide-next {
    justify-content: flex-start;
    align-items: center;
  }
  .swiper-slide-next img,
  .swiper-slide-prev img {
    transform: scale(0.9);
  }
</style>