如图

npm install swiper@6.4.5 --save

<template>
  <div class="swipers">
    <div class="swiper-area">
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide" v-for="value in 10" :key="value">{{value}}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
    // import Swiper, {Pagination,Navigation} from "swiper"
    // Swiper.use([Pagination,Navigation])
    import Swiper from "swiper"
    import "swiper/swiper-bundle.css"

  export default {
    components: {
      // Swiper,
      // SwiperSlide,
    },
    mounted() {
      new Swiper('.swiper-container', {
        slidesPerView: 5,
        autoplay: true,//可选选项，自动滑动
        spaceBetween: 12,
        centeredSlides: true,
        loop: true,
      })
    },
    methods: {
      onSwiper(swiper){
        console.log(swiper);
      },
      onSlideChange(){
        console.log('slide change');
      }
    },
  };
</script>
<style lang="less" scoped>
.swipers{
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        // border: 1px solid red;
        position: relative;
      }
      .swiper-area {
        position: absolute;
        top: 0px;
        height: 40px;
        width: 100%;
        /* background: #eee; */
      }
      .swiper-container {
        width: 100%;
        height: 100%;
      }
      .swiper-slide {
        text-align: center;
        font-size: 3px;
        background: pink;
        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;
        // width: 130px !important;
        transition: 300ms;
        transform: scale(0.8);
      }
    .swiper-slide-active,.swiper-slide-duplicate-active{
        transform: scale(1);
        // width: 50px !important;
    }
    .swiper-slide:not(.swiper-slide-prev,.swiper-slide-active,.swiper-slide-next){
      // border: 1px solid red;
      transform: scale(0.6);
      // height: 15px;
      // margin-top: 10px;
    }
    // .swiper-slide-prev,.swiper-slide-next{
    //   width: 40px !important;
    // }
    /* .swiper-slide-next{
      margin-right: 0 !important;
    } */
</style>