swiper 实现中间大，两边显示部分

<swiper :options="swiperOption">
    <swiper-slide >
          <div class="img"><img src="" alt=""></div>
          <div class="intro">
              <p class="weixinshu">这是某人的微信书</p>
              <p class="name">这是某人</p>
              <p class="price">￥999.00
                  <img src="../../assets/helpprice.png" alt=""></p>
                  <p class="helperImg">
                      <img src="../../assets/logo.png" alt="">
                      <img src="../../assets/logo.png" alt="">
                      <img src="../../assets/logo.png" alt="">
                  </p>
              
              <div class="chushi">初始价格 888 元 已节省 <span>800</span> 元。帮他助力&gt;</div>
          </div>
      </swiper-slide>
      <swiper-slide >
          <div class="img"><img src="" alt=""></div>
          <div class="intro">
              <p class="weixinshu">这是某人的微信书</p>
              <p class="name">这是某人</p>
              <p class="price">￥999.00
                  <img src="../../assets/helpprice.png" alt=""></p>
                  <p class="helperImg">
                      <img src="../../assets/logo.png" alt="">
                      <img src="../../assets/logo.png" alt="">
                      <img src="../../assets/logo.png" alt="">
                  </p>
              
              <div class="chushi">初始价格 888 元 已节省 <span>800</span> 元。帮他助力&gt;</div>
          </div>
      </swiper-slide>
      <swiper-slide >
          <div class="img"><img src="" alt=""></div>
          <div class="intro">
              <p class="weixinshu">这是某人的微信书</p>
              <p class="name">这是某人</p>
              <p class="price">￥999.00
                  <img src="../../assets/helpprice.png" alt=""></p>
                  <p class="helperImg">
                      <img src="../../assets/logo.png" alt="">
                      <img src="../../assets/logo.png" alt="">
                      <img src="../../assets/logo.png" alt="">
                  </p>
              
              <div class="chushi">初始价格 888 元 已节省 <span>800</span> 元。帮他助力 &gt;</div>
          </div>
      </swiper-slide>

js部分

<script>

export default {
    name: 'carrousel',
    data() {
      return {
        swiperOption: {
            direction: 'horizontal',
            loop: true,
            autoplay: 5000,
            slidesPerView: "auto",
            centeredSlides:true,
            spaceBetween: 20,
        },
      }
    },
    mounted() {
    
    }
  }
</script>

css部分

.swiper-container {
    overflow: hidden !important;
 }
 .swiper-container .swiper-wrapper .swiper-slide{ width: 4.9rem; }
 /* .swiper-container .swiper-wrapper .swiper-slide img{width: 100%; height: 3.20rem; border-radius: .20rem;} */
 .swiper-container .swiper-wrapper .swiper-slide-prev{ width: 0.1rem;}
 /* .swiper-container .swiper-wrapper .swiper-slide-prev img{ height: 2.84rem!important;} */
 .swiper-container .swiper-wrapper .swiper-slide-next{  width: 0.1rem;}
 /* .swiper-container .swiper-wrapper .swiper-slide-next img{ height: 2.84rem!important;} */
 .swiper-container .swiper-wrapper .swiper-slide-active{ width: 4.9rem;}