轮播图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)


3、轮播图轮播：
<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>


4、广告向上轮播
<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>


5、网格轮播
<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 参数