需要實現(xiàn)的效果如下：

目標(biāo)效果

踩坑經(jīng)歷：mock數(shù)據(jù)只創(chuàng)建了3條

• 情景1：導(dǎo)致loop為false狀態(tài)下，頁面只顯示右側(cè)的邊緣和中間內(nèi)容，左側(cè)邊緣不展示

• 情景2：導(dǎo)致loop為true狀態(tài)下，頁面只顯示左側(cè)的邊緣和中間內(nèi)容，右側(cè)邊緣不展示

  
  
  情景1

情景2

解決方案：mock數(shù)據(jù)增加為4條

參考文章有：https://blog.csdn.net/qq_43231248/article/details/132106493

完整代碼

<template>
  <div class="banner_box">
    <swiper
      :loop="true"
      :slidesPerView="'auto'"
      :spaceBetween="10"
      :centeredSlides="true"
      :pagination="{ clickable: true}"
      :autoplay="{
        delay: 2500,
        disableOnInteraction: false
      }"
      :modules="modules"
    >
      <swiper-slide
        v-for="info in banners"
        :key="info.id">
        <img :src="info.image" alt="" />
      </swiper-slide>
    </swiper>
  </div>
</template>
<script>
  // import Swiper core and required modules
  import {Autoplay, Pagination, A11y } from 'swiper/modules';

  // Import Swiper Vue.js components
  import { Swiper, SwiperSlide } from 'swiper/vue';

  // Import Swiper styles
  import 'swiper/css';
  import 'swiper/css/autoplay';
  import 'swiper/css/pagination';
  import 'swiper/css/a11y';
  // Import Swiper styles
  export default {
    components: {
      Swiper,
      SwiperSlide,
    },
    setup() {
      return {
        banners:[
          {
            title: 'banner1',
            image: 'https://cdn.wwads.cn/creatives/DQ0ejr8o40vUKOK0EyTjFepFuOUzX9bUJtKM9NeC.png'
          },
          {
            title: 'banner2',
            image: 'https://cdn.wwads.cn/creatives/DQ0ejr8o40vUKOK0EyTjFepFuOUzX9bUJtKM9NeC.png'
          },
          {
            title: 'banner3',
            image: 'https://cdn.wwads.cn/creatives/DQ0ejr8o40vUKOK0EyTjFepFuOUzX9bUJtKM9NeC.png'
          },
          {
            title: 'banner4',
            image: 'https://cdn.wwads.cn/creatives/DQ0ejr8o40vUKOK0EyTjFepFuOUzX9bUJtKM9NeC.png'
          }
        ],
        modules: [Autoplay, Pagination, A11y],
      };
    },
  };
</script>
<style lang="stylus" scoped>
.banner_box
  width 100%
  height 144px
  background #f8f8f8
  overflow hidden
  .swiper
    height 100%
    .swiper-wrapper
      height 100%
      .swiper-slide
        width 336px !important
        height 100%
        background-repeat no-repeat
        background-size cover
        background-position center
        border-radius 12px
        overflow: hidden
        img
          display block
          width 100%
          height 100%
</style>

注意：代碼主題使用<script setup></script> 也會導(dǎo)致效果顯示不出來