时间戳

首页 > 解决方案 > Slick Slider 无法在隐藏的 div 上正确加载

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

问题描述

标题是不言自明的。

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

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

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

标签： javascripthtmljquerycssslick.js

解决方案

如果您在幻灯片元素隐藏时初始化幻灯片，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

推荐阅读