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>