vue-awesome-swiper轮播图实践

        最近有个项目需求是做一个轮播图，图片不是铺满全屏，两边空白展示一点上下张图片的内容，具体如下图所示：

        选择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>

       

        具体可以看我的演示地址，设置loop循环模式，还要在加一个loopedSlides属性控制，这个是需要注意的：http://sandbox.runjs.cn/show/xlhzle4h

        目前发现在vue-awesome-swiper中使用loop模式会报错。