关于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;    }  }