vue实现swiper两端小中间大的效果 圆形

首先引入swiper,引入方法参考
https://blog.csdn.net/u013361179/article/details/123070947?spm=1001.2014.3001.5501

<div class="swiper-container" ref="interSwiper">
    <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="(item, index) in scenice" :key="index">
            <img class="img" :src="baseUrl + '/' + item.coverImage" alt="">
            <div class="textTitle">{{item.famousPersonNameEn}}</div>
        </div>
     </div>
    <div class="swiper-button-prev" @click="prev"></div>
    <div class="swiper-button-next" @click="next"></div>
</div>

import Swiper from 'swiper'

在拿到数据后初始化swiper

getScenice() {
      var that = this
      serves.getFamous().then(res => {
        if (res.data.code === 200) {
          this.scenice = res.data.data // 数据
          this.$nextTick(() => {
            var swiper = new Swiper('.swiper-container', {
              slidesPerView: 8,
              spaceBetween: 30,
              centeredSlides: true,
              loop: true,
              // slideToClickedSlide: true, // 放开后，可以点击任意swiper，会立马将点击的swiper居中并展示相应内容（有个坑，自己摸索，这也是我不放开的原因）
              navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
                hideOnClick: true
              },
              on: {
                slideChange: function() {
                  console.log(this.realIndex, 'realIndex', this)
                  // realIndex就是点击的swiper下标此时可以根据下标去展示相应的标题和文章简介内容
                  // that.personText.title = that.scenice[this.realIndex].famousPersonDescribeEn
                  // that.personText.id = that.scenice[this.realIndex].id
                }
              }
            })
            console.log(swiper)
          })
        }
      })
    }

.swipers {
  height: 200px;
}
.swiper-container {
  width: 1300px;
  // height: 250px;
  height: 415px;
  overflow: hidden;
  margin: auto;
}
::v-deep .swiper-slide {
  user-select:none;
  text-align: center;
  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  transition: 300ms;
  transform: scale(0.8);
  box-sizing: border-box;
  width: 130px !important;
  height: 130px !important;
  margin: auto;
  margin-right: 31px !important;
  // height: 200px;
  background: rgba(0,69,115,0.00);
  // background: pink;
  border: 3px solid #e7e7e7;
  border-radius: 50%;
  // width: 130px;
  // height: 130px;
  .img {
    width: 114px;
    height: 114px;
    // width: 100%;
    // height: 100%;
    border-radius: 50%;
    margin: auto;
  }
  .textTitle {
    display: none;
    text-align: center;
    font-size: 40px;
    font-family: Times, Times-Bold;
    font-weight: 700;
    color: #11293b;
    line-height: 36px;
    margin-top: 30px;
  }
}
 .swiper-slide-active,.swiper-slide-duplicate-active{
      transform: scale(1);
 }
 ::v-deep .swiper-slide-active {
    box-sizing: border-box;
    width: 200px !important;
    height: 200px !important;
    background: rgba(255,255,255,0.10);
    border: 8px solid rgba(43,144,211,0.20);
    border-radius: 108px;
    margin: auto;
    .img {
      width: 170px !important;
      height: 170px !important;
    }
    .textTitle {
      position: absolute;
      top: 220px;
      width: 800px;
      display: block;
      text-align: center;
      font-size: 40px;
      font-family: Times, Times-Bold;
      font-weight: 700;
      color: #11293b;
      // line-height: 36px;
      // margin-top: 30px;
    }
 }
 .swiper-wrapper {
   position: relative;
 }
 ::v-deep .swiper-slide-active::after {
   content: '';
   display: block;
   width: 151px;
   height: 13px;
   position: absolute;
   bottom: -40px;
   background-image: url('../../../assets/en/home/person@2x.png');
   background-size: 151px 13px;
   background-repeat: no-repeat;
   background-position:  center center;
 }
 ::v-deep .swiper-button-prev {
   top: 335px !important;
   left: 0 !important;
  //  width: 50px !important;
  //  height: 50px !important;
  --swiper-navigation-color: #20517E;/* 单独设置按钮颜色 */
  --swiper-navigation-size: 50px;/* 设置按钮大小 */
 }
 ::v-deep .swiper-button-next {
   top: 335px !important;
   right: 0 !important;
   --swiper-navigation-color: #20517E;/* 单独设置按钮颜色 */
   --swiper-navigation-size: 50px;/* 设置按钮大小 */
 }

注意：为了保持swiper和title时刻保持对其，title我放在了swiper里面