正在初始化隐藏的Slick.js旋转木马，显示的项目宽度为0

Question

我正试图在一个最初隐藏的模式上初始化slick。

在WordPress中，我有一个名为experiences的custom post type。我有ACF字段，并试图提取这些字段项，并在模式弹出窗口中显示它。因此，模态的工作方式是：

• 在experiences列表页面上，用户点击"；了解更多"。了解更多是打开模态的触发器
• [点击按钮，它将从该帖子的ACF字段中获取数据]
• 然后，带有提取字段的标记被附加到页脚中的全局模态中

包含附加标记的容器是#expHTML。该元素被隐藏，其内部HTML被附加到#global-modal。

因此，当我试图显示分配给experience帖子的图像时，slick初始化的imgs显示为width: 0px。

我试着在点击按钮时重新调整一下，但没用。以下是我尝试过的：

$('.slick').slick('unslick').slick('reinit').slick();
$(window).trigger('resize');

它们都不起作用，img仍然显示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();
});

此外，你应该能够通过在展示模态内容后刷新幻灯片来解决图像宽度问题，而不是试图"；取消点击"；以及"；reinit"：

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

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