基于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才实现了下标索引）
          }
        }
      }
    }
  },