how to display dynamic data in swiper slider with jquery ajax?

my swiper slider can not display the content, when i called the data from json with jquery ajax ? my swiper can't show, I have managed to display it with static data, but when I try to display it dynamically using jquery ajax, my swiper can't be displayed, can someone help me?

This is my swiper slider function

        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,
        });

This is my 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();
      });
    },
  });
}

This Is my view

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