npm install swiper vue-awesome-swiper --save
import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'
// import style (>= Swiper 6.x)
import 'swiper/swiper-bundle.css'
// import style (<= Swiper 5.x)
import 'swiper/css/swiper.css'
Vue.use(VueAwesomeSwiper, /* { default options with global component } */)
swiperOption: {
autoplay: true,
loop: true,
pagination: {
el: '.swiper-pagination',
clickable: true
// type: 'bullets'
}
}
<swiper ref="mySwiper" :options="swiperOption" class="mySwiper" @click="show = false" v-if="banners.length">
<swiper-slide class="swiper-slide" :key="index" v-for="(item, index) in banners">
<a href="javascript:void(0)" @click="linkTo(item.link)">
<img :src="item.advertFiles" class="images"/>
</a>
</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
有可能会报找不到css文件
建议用这个低版本
"vue-awesome-swiper": "3.1.3"