vue中使用swiper

1.安装swiper，执行npm install vue-awesome-swiper --save命令

2.在main.js中添加下面三行

?

1 2	import VueAwesomeSwiper from 'vue-awesome-swiper' Vue.use(VueAwesomeSwiper)

3.在当前页面引入：

?

1	import Swiper from 'swiper';import 'swiper/dist/css/swiper.min.css';

4.在html部分添加：

?

1 2 3 4 5 6 7

<swiper :options="swiperOption"> 　　<swiper-slide>slide1</swiper-slide> 　　<swiper-slide>slide2</swiper-slide> 　　<div class="swiper-pagination" slot="pagination"></div> 　　<div class="swiper-button-prev" slot="button-prev"></div> 　　<div class="swiper-button-next" slot="button-next"></div> </swiper>

5.将下面js部分添加到data里面：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

swiperOption: { 　　pagination: { 　　　　el: '.swiper-pagination', 　　　　clickable: true // 允许点击小圆点跳转 　　}, 　　autoplay: { 　　　　delay: 3000, 　　　　disableOnInteraction: false // 手动切换之后继续自动轮播 　　}, 　　loop: true, 　　navigation: { 　　　　nextEl: '.swiper-button-next', 　　　　prevEl: '.swiper-button-prev' 　　} },

 

具体用法见官方文档