vue.js使用vue-awesome-swiper實作輪播圖

先放效果圖：參考swiper介紹

vue.js使用vue-awesome-swiper實作輪播圖

1、首先第一步：安裝vue-awesome-swiper

npm install  vue-awesome-swiper --save
           

2、引入vue-awesome-swiper

在main.js中引入：

import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
Vue.use(VueAwesomeSwiper)（後可跟預設參數）
           

3、使用

注：swiper所在元件不能與swiper重名，否則報錯Maximum call stack size exceeded即堆棧溢出。

(1)、template部分

<swiper :options="swiperOption">
    <swiper-slide><img src=""></swiper-slide>
    <swiper-slide><img src=""></swiper-slide>
    <swiper-slide><img src=""></swiper-slide>
    <swiper-slide><img src=""></swiper-slide>
    <swiper-slide><img src=""></swiper-slide>

    <!--以下看需要添加-->
    <div class="swiper-scrollbar"></div> //滾動條
    <div class="swiper-button-next"></div> //下一個
    <div class="swiper-button-prev"></div> //上一個
    <div class="swiper-pagination" slot="pagination"></div> //标頁碼
</swiper>
           

(2)、script部分

以下有看不懂的可以去官網看api，連結官網

data() {
    return {
      swiperOption: {
        //元件不會通過NextTick來執行個體化swiper，即第一時間擷取到swiper對象
        notNextTick: true,
        //通過插槽slot使用分頁器
        pagination: '.swiper-pagination',
        // prevButton: '.swiper-button-prev',
        // nextButton: '.swiper-button-next',
        
        //實作輪播圖循環
        loop: true,
        //實作輪播圖自動滾動
        autoplay:true,
        //設定滾動速度
        // speed:1000,
        //解決小圓點渲染失敗問題
        pagination: {
          el: '.swiper-pagination',
          // 點選小圓點實作切換
          clickable: true,
          }，
        
        // zoom: true,
        // 手機端輕按兩下放大
        // grabCursor:true,
        // 手型
      },
      
    }
  },