vue轮播vue-awesome-swiper

1、npm install vue-awesome-swiper --save

2、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 参数

相关文章：https://segmentfault.com/a/1190000014609379
https://www.npmjs.com/package/vue-awesome-swiper