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

Question

标题非常不言自明。

\n

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

\n

这是小提琴（抱歉，它的代码行可能比它需要的多）。相关的CSS在最后，相关的javascript也很好识别。

\n

https://jsfiddle.net/Santos1600/9xv67aL8/

\n

到达滑块的进度是：单击“Sonhar”下面的图像，打开汉堡菜单，单击“Epis\xc3\xb3dios”，使用上一个或下一个按钮查看它应该如何加载。这仍然是一项正在进行的工作......只是div带有灰色背景的随机 s。

\n

Answer 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