1.vue-awesome-swiper（3D棱柱体轮播（正方体））

参考网站：

https://www.swiper.com.cn/api/index.html npm install vue-awesome-swiper --save //--save(相对路径，本文件夹下安装)

将swiper引入main.js

import VueAwesomeSwiper from 'vue-awesome-swiper' // require styles import 'swiper/dist/css/swiper.css' Vue.use(VueAwesomeSwiper);

在组件中使用

模板中的：

<div class="index"> <swiper :options="swiperOption"> <swiper-slide><img src="@/assets/img/startPage1.jpg" alt=""></swiper-slide> <swiper-slide><img src="@/assets/img/startPage1.jpg" alt=""></swiper-slide> <swiper-slide><img src="@/assets/img/startPage1.jpg" alt=""></swiper-slide> <!-- 分页器 --> <div class="swiper-pagination" slot="pagination"></div> </swiper> </div>

script中的：

export default { data() { return { swiperOption: { autoplay: { delay: 3000, stopOnLastSlide: true, disableOnInteraction: false, }, //自动播放 pagination: { el: '.swiper-pagination', //分页器 }, effect : 'cube', //3D正方体轮播（棱柱体不一定是正方体） cubeEffect: { slideShadows: true, shadow: true, shadowOffset: 100, shadowScale: 0.6 } } } } }

style中的：

.index{ height: 100% width: 100% } img{ height: 100% width: 100% vertical-align top }