Vue项目中使用swiper插件开发3d轮播图

在开发过程中有3D轮播图的需求，使用vue-awesome-swiper完成

先贴个效果图

• 安装npm install swiper@5.4.5 vue-awesome-swiper -S
• 全局引入并使用：

  	import VueAwesomeSwiper from 'vue-awesome-swiper'
  	import 'swiper/css/swiper.css'
  	
  	Vue.use(VueAwesomeSwiper)
  

• 组件中使用：
• 可修改coverflowEffect中的数值来实现轮播图3D的效果

<template>
  <div class="box">
    <swiper :options="swiperOption" ref="mySwiper">
      <swiper-slide v-for="(item, index) of 5" :key="index">
        <!-- <img class="swiper-img" :src="url + item.img" /> -->
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
  </div>
</template>

<script>
export default {
  data() {
    return {
      swiperOption: {
        loop: true,
        effect: "coverflow",
        grabCursor: true,
        centeredSlides: true,
        slidesPerView: 1.2,
        coverflowEffect: {
          //修改其中的数值，即可
          rotate: 0, //旋转
          stretch: 80, //拉伸
          depth: 150, //深度
          modifier: 1,
          slideShadows: true,
        },
        observer: true, //修改swiper自己或子元素时，自动初始化swiper
        observeParents: true, //修改swiper的父元素时，自动初始化swiper
      },
    };
  },
};
</script>

<style>
.box{
  width: 375px;
  height: 678px;
  background: skyblue;
  margin: 0 auto;
}
.swiper-container {
  width: 375px;
  height: 150px;
}
.swiper-slide {
  background-color: aqua;
}
</style>