vue中使用swiper

1.安裝swiper，執行npm install vue-awesome-swiper --save命令

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

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

3.在當前頁面引入：

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

4.在html部分添加：

<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里面：

swiperOption: {
　　pagination: {
　　　　el: '.swiper-pagination',
　　　　clickable: true // 允許點擊小圓點跳轉
　　},
　　autoplay: {
　　　　delay: 3000,
　　　　disableOnInteraction: false // 手動切換之后繼續自動輪播
　　},
　　loop: true,
　　navigation: {
　　　　nextEl: '.swiper-button-next',
　　　　prevEl: '.swiper-button-prev'
　　}
},

 

具體用法見官方文檔