javascript - 为什么 slick 在 SweetAlert 2 弹出内容中不起作用？

Question

为什么 slick 在 SweetAlert 2 模态内容中不起作用，我做错了什么，Html 加载完美，但 slick 插件似乎在模态内容中不起作用。

我尝试使用我在 slick 中指定的类添加我的 html 代码，在 sweetalert 2 中但不工作，然后我在我的页脚上添加了 slick 只是为了看看它是否工作和它的工作，所以在 sweetAlert2 内容中不工作，截图如下。

在 sweetAlert 2 中，在我的页脚中工作正常。

  var $slider;
     $slider = $('.subscriptionOffers');
       $slider.slick({
         infinite: true,
         arrows: true,
         centerMode: true,
         centerPadding: '0%',
         initialSlide: 0,
         focusOnSelect: true,
         speed: 300,
         prevArrow:'<div class="prev"><img src="images/prev.png"></div>',
         nextArrow:'<div class="next"><img src="images/next.png"></div>',
     });
     $('.subscribe-button-pc,.subscribe-button-mobile').on('click', function(){
       $slider.slick('slickGoTo', 0);

     });


  var sslider = '<div class="subscriptionOffers">';
  sslider += '<div style="text-align: center;"><h6 style="font-weight: 900; font-size: 16px; font-weight: 900;">Package 1</h6>';
  sslider += '<p><div class="popUpPrice">$30</div><label class="popUpReeC">/monthly</label></p>';
  sslider += '<p class="popUpDesc"></p>';
  sslider += '</div><div style="text-align: center;"><h6 style="font-weight: 900; font-size: 16px; font-weight: 900;">Package 2</h6>';
  sslider += '<p><div class="popUpPrice">$60</div><label class="popUpReeC">/3 months</label></p>';
  sslider += '<p class="popUpDesc"></p>';
  sslider += '</div><div style="text-align: center;"><h6 style="font-weight: 900; font-size: 16px; font-weight: 900;">Package 3</h6>';
  sslider += '<p><div class="popUpPrice">$250</div><label class="popUpReeC">/yearly</label></p>';
  sslider += '<p class="popUpDesc"></p>';
  sslider += '</div>';
  sslider += '<input class="username" type="text" placeholder="Username" name="username" id="username">';



$('.subscribe-button-pc,.subscribe-button-mobile').on('click', function(){
    const swalWithBootstrapButtons = Swal.mixin({
        customClass: {
          confirmButton: 'primary-btn btn userSearchFollowBtn',
        },
        buttonsStyling: false,
        showCloseButton: true
      })
      swalWithBootstrapButtons.fire({
        html: "" + sslider + "",
        confirmButtonText: 'Next step',
        reverseButtons: true
      }).then((result) => {
        if (result.value) {

        }
      })
});

标签： javascriptjqueryhtmlslick.jssweetalert2