轮播图vue-awesome-swiper_图片 轮播 npm

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 参数
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68