首先說下我們的需求，移動(dòng)端，默認(rèn)展示一張完整的圖片，第二張等比例縮小展示一部分

image.png

1. npm install vue-awesome-swiper（我下載的是3.1.3）
2. 需要用到的組件內(nèi)引入
   import { swiper, swiperSlide } from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
   如果沒有這個(gè)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',  //設(shè)置了這個(gè)就可以實(shí)現(xiàn)一個(gè)頁面兩張圖，也可以是具體的數(shù)字
          normalizeSlideIndex:false, //用于獲取下標(biāo)，因?yàn)樵O(shè)置了slidesPerView最后一張圖下標(biāo)不對
          autoHeight: true, //高度默認(rèn)撐開
          on:{
            slideChange: () => { //輪播圖改變事件
                let swiper = this.$refs.swiper.swiper 
                //如果到最后一張圖片不讓右滑則需要設(shè)置
                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);
  }