在vue-cli3中实现swiper层叠轮播图

效果图

1.按照npm上npm install swiper vue-awesome-swiper@4.1.1 --save

安装了最新的版本，发现不会自动播放，于是按照文档上面降低版本就可以了

2.在main.ts
import VueAwesomeSwiper from 'vue-awesome-swiper';
import 'swiper/css/swiper.css';
Vue.use(VueAwesomeSwiper);

3.<swiper ref="myswiper" :options="swiperOptions">
        <swiper-slide v-for="(img,index) in toyImg" :key="index" class="slide">
          <img :src="img" alt="toyImg">
        </swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>                 //圆点
  </swiper>

4.在data中
swiperOptions: {
        loop: true,
        autoplay: true,
        slidesPerView: 4,
        spaceBetween: 42,
        effect: 'coverflow',
          coverflowEffect: {
            slideShadows: false, // 页面阴影效果
            rotate: 0, // 旋转的角度
            stretch: 600, // 拉伸   图片间左右的间距和密集度，越大靠得越近
            depth: 300, // 深度   切换图片间上下的间距和密集度，值越大z轴距离越远，看起来越小。
            modifier: 0.8, // 修正值 该值越大前面的效果越明显
          },
        pagination: {
          el: '.swiper-pagination', //获取元素
          clickable: true, //可根据圆点切换
        },
      },

factoryBusinessImg: [
        'http://192.168.0.135:8081/toy1.jpg',
        'http://192.168.0.135:8081/toy2.jpg',
        'http://192.168.0.135:8081/toy3.jpg',
      ],

5.圆点换颜色--swiper-pagination-color: #7A50FF;