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

Question

标题不言自明。

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

这是fiddle（很抱歉，它的代码行可能比它需要的多，相关的css在最后，相关的javascript很好识别）：https://jsfiddle.net/Santos1600/9xv67aL8/

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

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 Fiddle: https://jsfiddle.net/vhoejgum/

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

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

Slick Slider not loading properly on an hidden div

javascript

html

jquery

css

slick.js