我想通过swiper加个轮播，但是实现有点问题，麻烦老师给看看

我参考的文章：https://blog.csdn.net/lqiqil/article/details/124167282

我将 轮播图摘离出去了  Swiper.vue

以下是我参考文章写的代码

<template>
  <swiper
    class="swiper-container"
    :navigation="{
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    }"
    :pagination="{ clickable: true }"
    :autoplay="{ autoplay: true }"
    loop
  >
    <swiper-slide class="swiper-slide" v-for="(item, i) in imgs" :key="i">
      <img :src="item" alt="" />
    </swiper-slide>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>
    <!-- 如果需要导航按钮 左右箭头。如果放置在swiper-container外面，需要自定义样式。-->
    <!-- <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div> -->
    <!-- 如果需要滚动条 -->
    <!-- <div class="swiper-scrollbar"></div> -->
  </swiper>
</template>

<script>
import { Swiper, SwiperSlide } from "swiper/vue";
import SwiperCore, {
  Navigation,
  Pagination,
  Scrollbar,
  A11y,
  Autoplay,
} from "swiper";
SwiperCore.use([Navigation, Pagination, Scrollbar, A11y, Autoplay]);

export default {
  name: "Swiper",
  data: function () {
    return {
      imgs: [
        require("../../assets/banner1.png"),
        require("../../assets/banner2.png"),
        require("../../assets/banner3.png"),
      ],
    };
  },
  components: { Swiper, SwiperSlide },
  setup() {
    const onSwiper = (swiper) => {
      console.log(swiper);
    };
    const onSlideChange = () => {
      console.log("slide change");
    };
    return {
      onSwiper,
      onSlideChange,
      modules: [Navigation, Pagination, Scrollbar, A11y],
    };
  },
};
</script>

<style lang="scss" scoped>
.swiper-container {
  width: 7.1rem;
  height: 3rem;
  border-radius: 0.1rem;
  --swiper-theme-color: #ff6600;
  --swiper-pagination-color: #248cc0;
  --swiper-navigation-color: #248cc0;
  --swiper-navigation-size: 20px;
}
.swiper-slide img {
  width: 100%;
}
</style>

swiper 版本

报错：超过最大调用堆栈

麻烦老师给看看是哪里的问题，谢谢老师