npm i vue-awesome-swiper@4.1.1 --save
npm i swiper@5.4.5 --save
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'
Vue.use(VueAwesomeSwiper, )
<swiper :options="swiperOption" ref="mySwiper" class="swiper" @slideChange="handleSlideChange">
<swiper-slide class="swiper-slide" v-for="item, index in list" :key="item.id">
<!-- content -->
</swiper-slide>
</swiper>
<!-- 轮播图切换按钮 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
swiperOption: {
direction: 'horizontal',
initialSlide: 0,
slidesPerView: 1.2,
centeredSlides: true,
spaceBetween: 20,
observer: true,
observeParents: true,
grabCursor: true,
keyboard: true,
effect: 'coverflow',
pagination: {
el: '.swiper-pagination'
},
navigation: {
prevEl: '.swiper-button-prev',
nextEl: '.swiper-button-next'
}
},
handleSlideChange () {
const swiper = this.$refs.mySwiper.$swiper;
},