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

我试图在一个模式上初始化

slick

，该模式最初是隐藏的

在WordPress中，我有一个名为

experiences

的

自定义帖子类型。我有
ACF
字段，试图提取这些字段项并在模式弹出窗口中显示。因此，模态的工作方式是：


在
体验
列表页面上，用户单击“了解更多”。了解更多信息是打开模式的触发器
[点击按钮，它将从该帖子的ACF字段中获取数据]
然后将带有提取字段的标记附加到页脚中的全局模式

包含附加标记的容器是
#expHTML
。此元素被隐藏，其内部HTML被附加到
#全局模式

因此，当我试图显示分配给
体验
帖子的图像时，初始化
slick
的
img
s显示为
宽度：0px

我试着在点击按钮时控制它，但它不起作用。以下是我尝试过的：

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

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

它们都不起作用，
img
s仍显示
width:0

演示：


（函数（$）{
$（文档）.on（“单击”，“触发”，函数（e）{
e、 预防默认值（）；
var modalID=“#全局模式”；
$（'.modal'）.removeClass（'modal--open'）；
$（modalID）.fadeIn（200，function（）{
$（this.addClass（'modal--open'）；
});
var experience_html=$（“#expHTML”）.html（）；
$（modalID）.html（experience_html）；
返回false；
$（'.slick'）.slick（'unslick'）.slick（'reinit'）.slick（）；
});
})（window.jQuery）
。隐藏{
显示：无；
}
a{
背景：浅蓝色；
填充：15px；
光标：指针；
}

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

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

  ...

  return false;

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

此外，您应该能够通过在显示模式内容后刷新幻灯片来解决图像宽度问题，而不是尝试“取消单击”和“重新单击”：

有关隐藏幻灯片问题的更多信息：
当我运行您的代码片段时，我在Slick脚本中发现一个错误。我认为脚本可能依赖于JQuery，所以您可能希望在使用Slick之前定义JQuery，看看这是否有什么作用。我将两者颠倒过来，以便示例能够运行。嗨，Ed，谢谢您的建议。我试过了，得到了一个未定义的
无法读取属性'refresh'错误（这是一个显示我的确切JS:）我也试过在模态打开后初始化slick，但是得到了一个
无法读取属性'add'的null
错误（这是另一个JS:）我在GitHub上也看到了这个问题，建议的解决方案对我不起作用（Aerials92的回答也给了我一个
无法读取未定义的
错误的属性'refresh'
$('.slick').slick("refresh");