解决Swiper轮播图动态加载图片问题的指南

<!-- Swiper -->
<div class="swiper mySwiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide imgdata">Slide 1</div>
    <div class="swiper-slide imgdata">Slide 2</div>
    <div class="swiper-slide imgdata">Slide 3</div>
    <div class="swiper-slide imgdata">Slide 4</div>
  </div>
  <div class="swiper-button-next"></div>
  <div class="swiper-button-prev"></div>
</div>

<!-- Initialize Swiper and Fetch -->
<script>
  let linkApi = "https://picsum.photos/v2/list?limit=4";

  fetch(linkApi)
    .then((res) => res.json())
    .then((data) => {
      console.log(data);

      let dataimg = "";
      data.map((values) => {
        dataimg += `<img src=${values.download_url}>`;
      });
      // 问题所在：只选择了第一个匹配元素
      document.querySelector(".imgdata").innerHTML = dataimg;
    })
    .catch((err) => {
      console.log(err);
    });

  // Swiper初始化通常放在DOM元素加载之后
  let swiper = new Swiper(".mySwiper", {
    navigation: {
      nextEl: ".swiper-button-next",
      prevEl: ".swiper-button-prev",
    },
  });
</script>

<!-- Initialize Swiper and Fetch (Corrected) -->
<script>
  let linkApi = "https://picsum.photos/v2/list?limit=4";

  fetch(linkApi)
    .then((res) => res.json())
    .then((data) => {
      console.log(data);

      // 获取所有具有 'imgdata' 类的幻灯片元素
      const swiperSlides = document.querySelectorAll(".swiper-slide.imgdata");

      // 遍历API数据，并将其一对一地分配给幻灯片
      data.forEach((value, index) => {
        if (swiperSlides[index]) { // 确保幻灯片元素存在
          swiperSlides[index].innerHTML = `<img src="${value.download_url}" alt="Image ${index + 1}">`;
        }
      });

      // Swiper初始化应在DOM内容更新后进行，以确保它能正确计算幻灯片
      // 如果Swiper在DOM内容更新前初始化，可能需要调用 swiper.update()
      // 或者将初始化代码移到这里
      let swiper = new Swiper(".mySwiper", {
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
        // 其他Swiper配置
        loop: true, // 示例：如果需要循环播放
      });

      // 如果Swiper在内容加载前已经初始化，可以调用update方法
      // swiper.update();

    })
    .catch((err) => {
      console.error("Error fetching images:", err);
    });

  // 如果Swiper初始化在fetch外部，且依赖于动态内容，
  // 那么在内容加载后需要手动调用 update() 方法。
  // 更好的做法是将其放在 .then() 块内。
</script>