vue-awesome-swiper的使用

npm安装
npm install vue-awesome-swiper --save

main.js中引入

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

组件中使用
2、轮播图轮播：

<div class="banner">
<swiper :options="banner">
<swiper-slide v-for="(item, index) in imageList" :key="index">
<div>< img :src="item"></div>
</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
</div>

3、广告向上轮播

<div class="up_banner">
<swiper :options="upBanner">
<swiper-slide><div >1</div></swiper-slide>
<swiper-slide><div >2</div></swiper-slide>
<swiper-slide><div >3</div></swiper-slide>
<swiper-slide><div >4</div></swiper-slide>
<swiper-slide><div >5</div></swiper-slide>
</swiper>
</div>

4、网格轮播

<div class="grid">
<swiper :options="grid">
<swiper-slide><div>1</div></swiper-slide>
<swiper-slide><div>2</div></swiper-slide>
<swiper-slide><div>3</div></swiper-slide>
<swiper-slide><div>4</div></swiper-slide>
<swiper-slide><div>5</div></swiper-slide>
</swiper>
</div>

JS数据初始化：

export default {
data() {
return {
banner:{
autoplay: {disableOnInteraction: false,},
loop: true,
pagination: {el: '.swiper-pagination',}
},
upBanner:{
autoplay: true,
loop: true,
direction: 'vertical'
},
grid: {
slidesPerView: 2.47,
spaceBetween: 22,
freeMode: true
}
}
}
}

所有的参数同 swiper 官方 api 参数