vue-awesome-swiper 实现中间大两边小轮播

step 1 安装vue-awesome-swiper、swiper

npm install vue-awesome-swiper -S 
npm install swiper -S 

step 2

在main.js 全局引用

import VueAwesomeSwiper from 'vue-awesome-swiper' 
Vue.use(VueAwesomeSwiper); 

//引入样式才会生效
import 'swiper/css/swiper.css' 

step 3

在页面

<template>
 <div class="container">

   <swiper :options="swiperOption" id="swiper1" class="container-swiper" >
     <swiper-slide class="container-swiper-list" v-for="item in reportList" :key="item.report_id" >
       <div class="container-swiper-list-item" @click="jump(item.report_url)">
         <img class="container-swiper-list-item-img" :src="item.report_img" />
         <div class="container-swiper-list-item-text">{{item.report_title}}</div>
       </div>
     </swiper-slide>
     <div class="swiper-pagination" slot="pagination" style="bottom: -10px"></div>
   </swiper>
 </div>
</template>

import { swiper, swiperSlide } from 'vue-awesome-swiper';
export default {
   name: "MediaReport",
   components: { swiper, swiperSlide },
   data(){
           return{
             swiperOption: {
               direction: 'horizontal',
               autoplay: {
                 delay: 1500,
                 stopOnLastSlide: false,
                 disableOnInteraction: false
               },
               slidesPerView: "auto",
               // 初始化定位
               initialSlide: 1,
               centeredSlides:true,
               spaceBetween: 20,
               // 注意swiper版本写法，不同版本写法不同
               pagination: {
                 el: ".swiper-pagination",
                 clickable: true,
                 type: "bullets"
               }
             },
           }
       },
   }

<style scoped lang="scss">

 .container{
   background-color: #ffcb2e;
   height: 540px;

   &-swiper{
     display: flex;
     align-items: center;
     padding-top: 40px;
     height: 350px;
     &-list{
       width: 360px;
       background-color: #ffffff;
       border-radius: 10px;
       margin: auto;
       &-item{

         &-img{
           width: 288px;
           height: 144px;
           display: block;
           margin: 20px auto;
         }
         &-text{
           color: #482929;
           font-weight: 300;
           margin: 20px 40px;
         }
       }
     }
   }

 }


 #swiper1 {
   width: 100%;
   overflow: hidden;
   padding:  0 0 10px 0;
 }
 .swiper-wrapper{
   display: flex;
   align-items: center;
 }
 .swiper-container, .swiper-container2 {
   width: 100%;
   overflow: visible !important;
   position: relative;
 }
 #swiper1 .swiper-container .swiper-wrapper .swiper-slide {
   width: 300px;
   border-radius: 10px;
   background-color: red;
 }

 /* 上一张 */
 .swiper-container .swiper-wrapper .swiper-slide-prev {
   margin-top: 15px;
   height: 330px !important;
 }
 /* 下一张 */
.swiper-container .swiper-wrapper .swiper-slide-next {
   margin-top: 15px;
   height: 330px !important;
 }

 /* 中间的图片 */
 .swiper-container .swiper-wrapper .swiper-slide-active {

 }

</style>