二、實現功能點
（1）、無縫輪播
（2）、進入變大、離開縮小（類3d切換效果）

三、js程式碼如下

<!--輪播圖外掛模板-->
<template>

</template>

<script type="text/ecmascript-6">
  import {swiper, swiperSlide} from 'vue-awesome-swiper'
  require('swiper/dist/css/swiper.css');//注意這裡
  import Pageination from "./pageination"
 

  import { mapActions, mapMutations, mapGetters, mapState}  from "vuex"
  import {getPriceSymbolValue} from '../../util/tool/index'

  export default {
    //props: ['bannerList'],
    data() {
      let _self=this;
      return {
        pageinationIndex:0,
        data: {
          "bannerList":[]
        },
        swiperOption: {
          loop: true
 
,   // 迴圈
          speed:500,   //切換速度
          mousewheelControl: false,// 禁止滑鼠滾輪切換
          lazy: {
            loadPrevNext: true,
          },
          pagination: {
            el: '.swiper-pagination',
          },
          autoplay: {
            delay:2000,
            stopOnLastSlide: false, // 切換到最後一個時不停止
 

            disableOnInteraction: false, //使用者操作swiper之後 不停止autoplay
          },
          watchSlidesProgress:true,
          centeredSlides: true, //設定為true時，活動塊會居中，而不是預設狀態下的居左。
          spaceBetween:10,
          slidesPerView: 1.7,
          loopedSlides :2,
          observer: true,
          observeParents: true
        }
      }
    },
    methods: {
    },
    mounted() {
      // 這邊就可以使用swiper這個物件去使用swiper官網中的那些方法
//      this.$nextTick(function() {
//        this.swiper.slideTo(3, 10, false);
//      });
    },
    computed: {
      swiper() {
        return this.$refs.mySwiper.swiper
      }
    },
    components: {
      swiper,
      swiperSlide,
      Pageination
    }
  }
</script>

<style lang="scss" type="text/scss"></style>