关于前端:在vuecli3中实现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;