基於swiper.js的異型輪播

   基於原生swiper.js的異型輪播
   <div class="swiper-container" >
            <div class="swiper-wrapper">
              <div v-for="(item, index) in currentSwipeInfo.fuCardList" :key="index" class="swiper-slide">
                <blessingSwipe
                  :card-info ="item"
                  :product="product"
                  :is-default="currentSwipeInfo.isDefault"
                  @giveOrTake="giveOrTake" />
          </div>
       </div>
  </div>

　　

  this.$nextTick(() => {
      this.mySwiper = new Swiper('.swiper-container', {
        direction: 'horizontal',
        loop: false,
        autoplay: false,
        slidesPerView: 'auto',
        centeredSlides: true,
        // spaceBetween: '8%',
        observer: true, // 修改swiper自己或子元素時，自動初始化swiper
        observeParents: true // 修改swiper的父元素時，自動初始化swiper
      })
    })

　　

　基於vue-awesome-swiper 的異型輪播

  import VueAwesomeSwiper from 'vue-awesome-swiper'

  Vue.use(VueAwesomeSwiper)

   <!-- 輪播區域 -->
          <div class="swiper-area">
            <swiper ref="mySwiper" :options="swiperOption">
              <swiper-slide v-for="(item, index) in receiveCardList" :key="index">
               輪播的內容
              </swiper-slide>
            </swiper>
          </div>

　　

 data() {
    return {
      swiperOption: {
        notNextTick: true,
        direction: 'horizontal',
        slidesPerView: 3, // 可見圖片張數
        spaceBetween: '10%', // 在slide之間設置距離 也可以是百分比 10%
        centeredSlides: true, // 默認選中中間一張
        loop: false,
        observer: true, // 修改swiper自己或子元素時，自動初始化swiper
        observeParents: true, // 修改swiper的父元素時，自動初始化swiper
        autoplay: {
          stopOnLastSlide: true // 滑動到最后一張的時候停止滑動
        },
        on: {
          click: () => {
            // 通過$refs獲取對應的swiper對象
            const swiper = this.$refs.mySwiper.swiper
            const i = swiper.realIndex
            const flag = this.imgList[i]
            location.href = flag.url
          },
          slideChangeTransitionStart: function() {
            this.imgIndex = this.realIndex + 1 // 獲取輪播圖片下標索引；這里有一個坑,使用realIndex才實現了下標索引）
          }
        }
      }
    }
  },