javascript - 如何使用 jquery ajax 在 swiper 滑块中显示动态数据？

Question

当我使用 jquery ajax 从 json 调用数据时，我的 swiper 滑块无法显示内容？我的 swiper 无法显示，我已经设法用静态数据显示它，但是当我尝试使用 jquery ajax 动态显示它时，我的 swiper 无法显示，有人可以帮助我吗？

这是我的滑动滑块功能

        var swiper = new Swiper(".swiper-container", {
          slidesPerView: 2,
          spaceBetween: 10,
          // init: false,
          pagination: {
            el: ".swiper-pagination",
            clickable: true,
          },
          breakpoints: {
            640: {
              slidesPerView: 2,
              spaceBetween: 10,
            },
            768: {
              slidesPerView: 1,
              spaceBetween: 10,
            },
            1024: {
              slidesPerView: 3,
              spaceBetween: 10,
            },
          },
          keyboard: true,
          autoplay: true,
        });

这是我的 AJAX

function showProgramPaginate() {
  $.ajax({
    url: "http://127.0.0.1:8000/api/program_paginate",
    type: "get",
    dataType: "json",
    success: function (data) {
      let program = data.program;
      console.log(program);
      $.each(program, function (i, data) {
        $(".swiper-wrapper").append(
          `<div class="swiper-slide" style="width: 48%; margin-right: 10px;">
            <a href="#!" onclick="detailProgram(` +
            data.id +
            `);">
              <img class="img-program" src="` +
            data.gambar +
            `" alt="" />
            </a>
          </div>`
        );
        $(".preloader").fadeOut();
      });
    },
  });
}

这是我的看法

 <!-- ISI -->
      <div class="container swiper-container">
        <div class="swiper-wrapper"></div>
      </div>
    </div>
    <!-- ISI -->