在vue(2.5.x)中使用swiper(4.3.3)，輪播加了autoplay和loop、observer、observeParents等引數還是很詭異的無法迴圈輪播；

那麼可以這樣寫程式碼試試：

<template>
  <div class="swiper-container banner">
        <div class="swiper-wrapper">
            <div v-for='(item, i) in banner_list' :key='i' class="swiper-slide">
                <router-link :to="{ path: '/details', query: {id: item.id}}">
                  <img :src='item.picUrl' alt="圖片載入失敗">
                </router-link>
            </div>
        </div>
        <!-- 如果需要分頁器 -->
        <div class="swiper-pagination"></div>

        <!-- 如果需要導航按鈕 -->
        <!-- <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div> -->

        <!-- 如果需要滾動條 -->
        <!-- <div class="swiper-scrollbar"></div> -->
    </div>
</template>

<script>
import Swiper from 'swiper'
export default {
  data () {
    return {
      banner_list: []
    }
  },
  methods: {
    initSwiper () {
      this.swiper = new Swiper('.banner', {
        loopAdditionalSlides: 3,
        loop: true,
        autoplay: {// 自動滑動
          disableOnInteraction: false
        },
        pagination: {// 如果需要分頁器
          el: '.swiper-pagination'
        },
        observer: true, // 啟動動態檢查器(OB/觀眾/觀看者)
        observeParents: true // 修改swiper的父元素時，自動初始化swiper
        // updateOnImagesReady: true
        // 如果需要前進後退按鈕
        // navigation: {
        //   nextEl: '.swiper-button-next',
      //   prevEl: '.swiper-button-prev'
      // }
      // 如果需要滾動條
            // scrollbar: {
            //   el: '.swiper-scrollbar'
            // }
          })
      }
  },
  mounted () {
    this.$http.get('/api/banner/list').then(res => {
      let { data } = res
      if (data.code === 0) {
        this.banner_list = data.data

        // 解決方法: 在獲取完資料後，將swiper放在$nextTick下一個UI幀再初始化。

        this.$nextTick(() => {
          this.initSwiper()
        })
        
      }
    })
  }
}
</script>