Slick Slider 无法在隐藏的 div 上正确加载答案

【问题标题】：Slick Slider not loading properly on an hidden divSlick Slider 无法在隐藏的 div 上正确加载
【发布时间】：2020-05-22 14:35:33
【问题描述】：

标题是不言自明的。

我正在单个 html 文件中创建一个网站，根据onclick 函数，不同的页面只是从display:none 到display:block 的divs。在其中一个页面中，我想使用一个光滑的滑块。不幸的是，第一次显示 div 时，光滑的滑块永远不会正确加载。只有当我按下下一个/上一个按钮或调整浏览器大小时，它才会恢复活力。有什么办法可以解决这个问题吗？

这是小提琴（对不起，它可能有比它需要的更多的代码行，相关的css在最后，相关的javascript很好识别）：https://jsfiddle.net/Santos1600/9xv67aL8/

到达滑块的进度是：单击“Sonhar”下方的图像，打开汉堡菜单，单击“Episódios”，使用上一个或下一个按钮查看它应该如何加载（仍在进行中，目前只是随机的divs，背景为灰色）。

【问题讨论】：

标签： javascript html jquery css slick.js

【解决方案1】：

如果您在幻灯片元素隐藏时初始化幻灯片，Slick.js 无法计算出幻灯片的宽度，因此它将宽度设置为零。一种解决方案是在您展示幻灯片后刷新您的 Slick 实例。在你的情况下：

function SwapDivsWithClick(div1, div2) {
  var d1 = document.getElementById(div1);
  var d2 = document.getElementById(div2);
  if (d2.style.display == "none") {
    d1.style.display = "none";
    d2.style.display = "block";
  } else {
    d1.style.display = "block";
    d2.style.display = "none";
  }

  // Refresh slideshow when Episodios is revealed
  if (div2 === 'episodios') {
    $(".postwrapper").slick("refresh");
  }
}

JS 小提琴：https://jsfiddle.net/vhoejgum/

有关 slick.js 问题的更多信息：https://github.com/kenwheeler/slick/issues/235

【讨论】：

谢谢。绝对的救星。