vue中使用vue-awesome-swiper

首先说下我们的需求，移动端，默认展示一张完整的图片，第二张等比例缩小展示一部分

1. npm install vue-awesome-swiper（我下载的是3.1.3）
2. 需要用到的组件内引入
   import { swiper, swiperSlide } from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
   如果没有这个css文件，可以尝试切换一下版本

3.       <swiper ref="swiper" :options="swiperOptions">
               <swiper-slide>img1</swiper-slide>
               <swiper-slide>img2</swiper-slide>
               <swiper-slide>img3</swiper-slide>
         </swiper>
   

        swiperOptions: {
          slidesPerView : 'auto',  //设置了这个就可以实现一个页面两张图，也可以是具体的数字
          normalizeSlideIndex:false, //用于获取下标，因为设置了slidesPerView最后一张图下标不对
          autoHeight: true, //高度默认撑开
          on:{
            slideChange: () => { //轮播图改变事件
                let swiper = this.$refs.swiper.swiper 
                //如果到最后一张图片不让右滑则需要设置
                swiper.allowSlideNext = false
        }
      }
   },
   

等比例缩小样式

.swiper-slide {
    width: auto;
    transition: all .3s;
  }
  .swiper-slide:nth-last-child(1) {
    margin-right: 80px;
  }
  .swiper-slide-next,.swiper-slide-prev {
    transform: scale(0.85, 0.85);
  }