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