javascript - 初始化隐藏的 Slick.js 轮播，显示宽度为 0 的项目

Question

我正在尝试初始化 slick在 的模态上最初是隐藏的 .
在 WordPress 中，我有一个 custom post type叫 experiences .我有 ACF字段并尝试提取这些字段项并将其显示在模态弹出窗口中。因此，模态的工作方式是:

关于 experiences列表页面，用户点击“了解更多”。了解更多是打开模态的触发器。

[单击按钮时，它将从该帖子的那些 ACF 字段中获取数据]

然后将带有提取字段的标记附加到在页脚中找到的全局模式。

包含附加标记的容器是 #expHTML .此元素被隐藏，其内部 HTML 附加到 #global-modal .
因此，当我尝试显示分配给 experience 的图像时后， img哪里 slick初始化显示为 width: 0px .
我试图在按钮点击时重新初始化 slick，但它不起作用。这是我尝试过的:

$('.slick').slick('unslick').slick('reinit').slick();

$(window).trigger('resize');

它们都不起作用， img s还在显示 width:0演示:

(function($) {
  $(document).on("click", '.trigger', function(e) {

    e.preventDefault();

    var modalID = '#global-modal';
    $('.modal').removeClass('modal--open');

    $(modalID).fadeIn(200,function(){
      $(this).addClass('modal--open');
    });

    var experience_html = $("#expHTML").html();
    $(modalID).html(experience_html);
    return false;

    $('.slick').slick('unslick').slick('reinit').slick();

  });
})(window.jQuery);

.hidden{
  display: none;
}

a{
  background: lightblue;
  padding: 15px;
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<div id="expHTML" class="hidden">
  <div class="modal">
    <div class="slick">
      <img src="https://dummyimage.com/200X200/802380/fff.png&text=IMAGE+1"/>
      <img src="https://dummyimage.com/200X200/374cbf/ffffff.png&text=IMAGE+2"/>
      <img src="https://dummyimage.com/200X200/6ebd7e/ffffff.png&text=IMAGE+3"/>
    </div>
  </div>
</div>

<a class="trigger">Click me</a>

<!-- Modal  popup-->
<div class="modal" id="global-modal">
  <div class="modal__inner">
    <a class="modal__close"></a>
    <div class="modal__box"></div>
  </div>
</div>

Answer 1

在尝试重置幻灯片之前，您似乎正在从 onclick 函数返回，这意味着永远不会执行重置代码。

$(document).on("click", '.trigger', function(e) {

  ...

  return false;

  $('.slick').slick('unslick').slick('reinit').slick();
});

此外，您应该能够通过在显示模态内容后刷新幻灯片来清除图像宽度问题，而不是尝试“unslick”和“reinit”:

$('.slick').slick("refresh");

有关隐藏幻灯片问题的更多信息: https://github.com/kenwheeler/slick/issues/235