最近有個專案需求是做一個輪播圖，圖片不是鋪滿全屏，兩邊空白展示一點上下張圖片的內容，具體如下圖所示：

        選擇vue-awesome-swiper外掛的原因是，他就是根據swiper外掛改寫而來的，功能齊全，模式多種。而我又剛好在swiper官網看到該種特效，於是去拔他的原始碼，跟著寫了下，結果發現完全不可行，猜測是不是版本的問題，可是發現兩個版本都是3.xx版的，應該不至於。

        最後又去查了下官網api，發現只要結合幾個屬性和css樣式就完全可以做到。這裡我用的vue-cli建立的專案，具體實現方法如下：

<template>

  <div class="swiper">
    <swiper :options="swiperOption">
      <swiper-slide v-for="(item, index) in slides" :key="index"><img :src="item"></swiper-slide>
    </swiper>
  </div>

</template>
<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper';
  export default{
    name: 'test2',
    data(){
      return {
        slides: [
          'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1511015180050&di=0d2ee92eead284e8133d6df07535d75a&imgtype=0&src=http%3A%2F%2Fimg.sc115.com%2Fuploads1%2Fsc%2Fjpgs%2F1512%2Fapic16988_sc115.com.jpg',
          'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1511015180167&di=7412fd486c47c15f1d27485be0d7bd28&imgtype=0&src=http%3A%2F%2Fwww.duoxinqi.com%2Fimages%2F2012%2F06%2F20120605_8.jpg',
          'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1511015180167&di=3bcedd33a30129b9951be2a81f9b505c&imgtype=0&src=http%3A%2F%2Fpic1.5442.com%2F2015%2F0420%2F06%2F05.jpg'
        ],
        //輪播config
        swiperOption: {
          // 如果自行設計了外掛，那麼外掛的一些配置相關引數，也應該出現在這個物件中，如下debugger
          debugger: true,  
          //autoplay: 3000,        
          slidesPerView: "auto",//設定slider容器能夠同時顯示的slides數量(carousel模式)。可以設定為數字（可為小數，小數不可loop），或者 'auto'則自動根據slides的寬度來設定數量。loop模式下如果設定為'auto'還需要設定另外一個引數loopedSlides。
          centeredSlides: true//設定為true時，活動塊會居中，而不是預設狀態下的居左。
 

        }
      }
    },
    components: {
      swiper,
      swiperSlide
    }
  }
</script>

<style lang="styl" scoped>

.swiper
  margin 10px auto
  width 10rem
  height 6.4rem
  overflow hidden
  .swiper-slide
    width 8.533333333333333rem
    height 6.4rem
    &.swiper-slide-active
      img
        margin-top 0
        width 100%
        height 100%
    img
      display block
      margin 0 auto
      margin-top 3.5%
      width 90.625%
      height 90.625%
      vertical-align middle
      -webkit-transition all 1s ease 0s
      -moz-transition all 1s ease 0s
      -ms-transition all 1s ease 0s
      -o-transition all 1s ease 0s
      transition all 1s ease 0s
</style>
 

        目前發現在vue-awesome-swiper中使用loop模式會報錯。