1，安装插件
npm install vue-awesome-swiper
2，组件中引用
import { swiper, swiperSlide } from "vue-awesome-swiper";
components: {
swiper,
swiperSlide
},
3，使用
<template>
<swiper class="swiper" :options="swiperOption">
<swiper-slide v-for="(item,index) in list" :key="index">
</swiper-slide>
<!-- <div class="swiper-pagination swiper-pagination-bullets" slot="pagination"></div> -->
</swiper>
</template>
<script>
data(){
return{
swiperOption: {
loop: true,
effect: "coverflow", //翻转效果
centeredSlides: true,
slidesPerView: "auto", //设置中间的卡片居中显示
coverflowEffect: { // coverflow 效果调整
rotate: 30,
stretch: 0,
depth: 60,
modifier: 2,
slideShadows: true
}
// cubeEffect: { //cube 效果调整(
将效果设为‘cube’时要记得给最外层的‘swiper’添加可视width)
// slideShadows: false,
// shadow: false,
// shadowOffset: 0,
// shadowScale:1
// }
}
}
}
</script>