关于vue.js:Vue-轮播图中间大两头小

应用插件版本号 (决定成败，十分重要)

"swiper": "^5.3.1",
"vue-awesome-swiper": "^4.1.1",

引入

import Vue from 'vue'
import vueSwiper from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'
Vue.use(vueSwiper)

模板

    <div class="top-banner">
    <swiper
        :options="swiperOption"
        ref="mySwiper"
        class="swiper"
        v-if="bannerData.length > 0"
      >
        <swiper-slide
          class="list-item"
          v-for="(item, index) in bannerData"
          :key="index"
        >
          <div class="choice-box" @click="picStartGame(item)" >
            <img :src="item.imgUrl" alt class="choice-pic" />
          </div>
        </swiper-slide>
      </swiper>
       </div>

swiper 配置

data(){
  return{bannerData: [],  
  swiperOption: {
        initialSlide: 0, // 设定初始化时 slide 的索引
        effect: 'coverflow',
        slidesPerView: 1.1,
        spaceBetween: 20,
        centeredSlides: true, // 流动块会居中，而不是默认状态下的居左
        loop: true,
        speed: 1000,
        autoplay: {
          delay: 5000,
          stopOnLastSlide: false,
          disableOnInteraction: false,
        },
        observer: true, // 批改 swiper 本人或子元素时，主动初始化 swiper
        observeParents: true, // 批改 swiper 的父元素时，主动初始化 swiper
        coverflowEffect: {
          rotate: 28, // slide 做 3d 旋转时 Y 轴的旋转角度。默认 50。stretch: 3, // 每个 slide 之间的拉伸值，越大 slide 靠得越紧。depth: 100, // slide 的地位深度。值越大 z 轴间隔越远，看起来越小。modifier: 1, // depth 和 rotate 和 stretch 的倍率，相当于 depth*modifier、rotate*modifier、stretch*modifier，值越大这三个参数的成果越显著。默认 1。slideShadows: false, // 开启 slide 暗影。默认 true。},
      },
      }
      }

款式

.top-banner {
    height: 3.68rem;
    // width: 6.48rem;
    width: 100%;
    text-align: center;
    margin-top: 1rem;
    img {
      width: 100%;
      height: 3.68rem;
      border-radius: 0.2rem;
    }
  }