swiper在Vue項目中的使用

前提條件：請先確保有一個基於webpack模板的項目(vue-cli腳手架一鍵安裝~)

1.npm命令安裝swiper

npm install swiper --save-dev

2.在需要用到swiper插件的組件中引入swiper

import Swiper from "swiper"

3.在組件的style中引入swiper插件的css（根據自己的項目路徑）

<style>
@import "../../css/swiper.min.css";
</style>

4.在methods方法里初始化swiper插件

methods:{
//初始化swiper插件
_.initSwiper(){
    var mySwiper = new Swiper (".swiper-box",{
        direction:'horizontal',
        loop:true,  //循環
        loopFillGroupWithBlank: true,  
        observer:true,//修改swiper自己或子元素時，自動初始化swiper
    　　 observeParents:true,//修改swiper的父元素時，自動初始化swiper
        //使用分頁器
        paginationClickable :true,
    　　 pagination: {
        　　el: '.swiper-pagination',
    　　 },    
        autoplay: {
        　　disableOnInteraction: false,  //觸碰后自動切換停止
    　　},  
    } 
} 
}        

5.在mounted鈎子函數里調用

mounted(){
    this._initSwiper();
}

6.在html中，用swiper-box的類名包裹整個swiper的div