Jquery Lightslider不会与我的标签布局配合使用。我错过了什么？

Question

我几个月来一直在使用JQuery LightSlider绝对零问题。但是，我们正在重组我们的网页产品页面，并且有一些我无法弄清楚的事情。我已经完成了5次破解CSS（我很确定问题出在哪里），让我的后端IT专家仔细研究它。

问题在于：我的LightSlider位于我的选项卡式布局的“tab 3”中（它也可以与JQuery一起使用）。我已经将它显示在主图像显示的位置，以及“下一个”和“前一个”控制箭头。但是，缩略图将不会显示。虽然如果我检查页面，缩略图会显示，主图像会消失。

我没有这方面的JSFiddle，因为它在JSFiddle中可以自行运行。它在其他地方运作良好。我没有提供开发网页的问题：http://www.spilighting.com/emr/NPDP_SFAP.html

问题标签是“家庭”标签。

Answer 1

我为自己找到了解决方案。

jQuery('.tabs a').click(function(){ $('.sliders-item').resize(); });

Answer 2

我进一步查看了它并且lightslider无法正确加载，因为tab-3的内容在加载时被隐藏。

我通过以下步骤找到了它：

1. 转到网站并在标签1上打开控制台

2. 将jQuery加载到控制台

3. 将lightslider加载到控制台

4. 从控制台的标题中加载lightslider初始化代码

结果：滑块不起作用。




我在上面重复但是然后在标签3上打开了控制台，滑块突然开始工作;）




如何解决这个问题？

将现有的css和/或js更改为不隐藏标签3。

然后隐藏了幻灯片onSliderLoad功能中的标签3。

或者

您还可以使用overflow: hidden; height: 0;隐藏包装器div中的选项卡内容，然后将包装器div设置为height: auto;以显示选项卡。此方法可确保将内容加载到dom中，就好像它显示的内容没有显示或使用任何空格一样。

或者

使用更现代的灯光滑雪板替代品，像猫头鹰旋转木马一样更可靠：P