vue-cli vue-awesome-swiper轮播 @酷酷的小航航

首先下载vue-awesome-swiper

	 cnpm install vue-awesome-swiper --save

在main.js中引入

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

html中

//绑定options定义轮播名字
<swiper :options="swiperOption">
		<swiper-slide v-for="(item,index) in list" :key="index" >
			<div><img  class='swiper-img' :src="item.picUrl"alt=""></div>
		</swiper-slide>
		//分页
	<div class="swiper-pagination" slot="pagination"></div>
</swiper>

script

data(){
	return{
		swiperOption: {
				autoplay: {
					delay: 1000
				},
				pagination: {
					el: '.swiper-pagination',
					clickable: true //允许分页点击跳转
				},
			},
		}
	},