javascript - Slick.js 正在破坏 Foundation 清除灯箱

Question

我无法让 Slick.js 和 Foundation clearing lightbox 很好地协同工作。我的网站设置方式是三个“页面”，但每个页面都是一张 Slick.js 幻灯片，因此该网站实际上只是一个实际网页。

在我的摄影“幻灯片”中，我有一个带有 Foundation 的基本灯箱设置。但是，启用 Slick.js 后，我无法正确打开灯箱。当 Slick.js 被禁用时，它工作得很好。

你可以在这里看到一个活生生的例子:www.kcfeatures.com/services.html

这是一个实际的工作示例(禁用了 slick.js):www.kcfeatures.com/services1.html

对于我的生活，我无法弄清楚如何让它发挥作用。我的猜测是它与光滑的轨道有关吗？由于 slick-track div 太宽，它可能会弄乱灯箱的显示方式。灯箱通常也从视口(viewport)的最顶部开始，但启用 slick.js 后，它开始在顶部栏下方， slider 开始的地方。

如有任何帮助或指导，我们将不胜感激!

Answer 1

即使我尝试实现类似的东西，但 slick 不允许我的清除灯箱工作。

建议/解决方法

1. 尝试 Foundation 5 Reveal 模态。
   为每个包含大版本图像的缩略图图像单独划分。调整您的代码以触发显示较大版本的每个缩略图的显示模式。但是，这将不允许您像清除灯箱那样浏览其他图像。 (您可以在显示模式 div 中实现一个灵活的 slider 来实现这一点。)

2. 使用 Foundation Tabs 怎么样？
   我看了你的网站，除了摄影、摄像和网页设计div效果的幻灯片外，没有特别需要光滑的用法。我相信您可以使用 Foundation Tabs 并实现相同的功能(现在使用清除灯箱将非常容易)。如果您想要选项卡的动画，您可以引用 Jquery Slide 动画并为您的选项卡实现相同的动画。您还可以使用 this 引用 Foundation Tabs 动画.