Swiper.js，无法点击分页中的项目符号

Question

子弹仍然按照图像工作和移动，但不会按照图像循环。如果我点击项目符号，它就会冻结，如果我继续点击它。它会消失。我认为这是关于索引的问题，但我不知道如何修复它。

export default {
  name: "BannerSection",
  data() {
    return {
      images: [],
    };
  },
  async mounted() {
    try {
      const response = await this.$axios.$get(
        "https://picsum.photos/v2/list?limit=12"
      );
      this.images = response;
      this.initSwiper();
    } catch (error) {
      console.error("Failed to fetch images:", error);
    }
  },

  methods: {
    getPhotoUrl(image) {
      return `https://picsum.photos/id/${image.id}/5000/3333`;
    },
    initSwiper() {
      this.swiper = new Swiper(".swiper-container", {
        modules: [Navigation, Pagination, Autoplay],
        direction: "horizontal",
        speed: 1200,
        loop: true,
        slidesPerView: 1,
        autoplay: {
          delay: 3000,
        },
        pagination: {    
          el: ".swiper-pagination",
          clickable: true,        
        },
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        }
      
      });
    },

  },
};

Answer 1

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide" v-for="image in images" :key="image.id">
      <img :src="getPhotoUrl(image)" class="swiper-image" />
    </div>
  </div>
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
  <div class="swiper-pagination"></div>