第一步：安裝swiper：npm install [email protected] --save-dev

完成之後，你會在專案的node_modules資料夾中多一個swiper資料夾。

第二步：引用元件

import Swiper from 'swiper';

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

第三步：html中如何使用：

 <div class="swiper-container" style="width:372px;height:200px;">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <img src="https://img01.hua.com/uploadpic/newpic/9010011.jpg" alt="" width="100%">
        </div>
        <div class="swiper-slide">
          <img src="https://img01.hua.com/uploadpic/newpic/201709151725388540.jpg" alt="" width="100%">
        </div>
        <div class="swiper-slide">
          <img src="https://img01.hua.com/uploadpic/newpic/201709011117442888.jpg" alt="" width="100%">
        </div>
      </div>
    </div>
 

vue程式碼：

mounted(){
        var mySwiper = new Swiper('.swiper-container', {
          autoplay:3000,
          speed:300,
          loop:true,
          onClick: function(swiper){
            alert('你點了Swiper');
            alert(mySwiper.realIndex);     //當前索引
          }
        })
}