关于前端:在vuecli3中实现swiper层叠轮播图

效果图

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

装置了最新的版本，发现不会自动播放，于是依照文档下面升高版本就能够了

2.在main.tsimport 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;