vue awaresome swiper的使用

main.js
import  VueAwesomeSwiper from 'vue-awesome-swiper'
import  'swiper/dist/css/swiper.css'
Vue.use(VueAwesomeSwiper)


組件

<template>
  <div id="container">
    <swiper :options="swiperOption" ref="mySwiper">

      <swiper-slide v-for="(item,index) in swipes">
        <img :src="item.picUrl" >
      </swiper-slide>
  <p class="swiper-pagination" slot="pagination"></p>
  </swiper>
  </div>
</template>
<script>
  import { swiper, swiperSlide } from 'vue-awesome-swiper'
  export default {
    name: 'carrousel',
    props:["swipes"],
    data () {
      return {
        swiperOption: {
          autoplay : {
            disableOnInteraction: false, //用戶操作后是否禁止自動循環
            delay: 3000 //自自動循環時間
          }, //可選選項，自動滑動
          speed: 1500, //切換速度，即slider自動滑動開始到結束的時間（單位ms）
          loop:true, //循環切換
          grabCursor: true, //設置為true時，鼠標覆蓋Swiper時指針會變成手掌形狀，拖動時指針會變成抓手形狀
          // setWrapperSize: true, //Swiper使用flexbox布局(display: flex)，開啟這個設定會在Wrapper上添加等於slides相加的寬或高，在對flexbox布局的支持不是很好的瀏覽器中可能需要用到。
          autoHeight: true,   //自動高度。設置為true時，wrapper和container會隨着當前slide的高度而發生變化。
          scrollbar: '.swiper-scrollbar',
          mousewheelControl: true, //設置為true時，能使用鼠標滾輪控制slide滑動
          observeParents: true, //當改變swiper的樣式（例如隱藏/顯示）或者修改swiper的子元素時，自動初始化swiper
          pagination: {
            el: '.swiper-pagination',
            // type : 'progressbar', //分頁器形狀
            clickable :true, //點擊分頁器的指示點分頁器會控制Swiper切換
          },

        },
        computed: {
          swiper() {
            return this.$refs.mySwiper.swiper
          }
        }
      }
    }
  }
</script>
<style scoped>
  .swiper-slide{
    width:100%;
    height:150px;
  }
  img {
    width: 100%;
    height: auto;
  }
</style>