jquery - Flexslider 的窗口大小调整问题

Question

我正在使用 WooTheme 的 Flexslider 插件来展示图像幻灯片。

默认情况下，幻灯片是隐藏的.hide()，这似乎会导致一些问题。

如果您看到此测试站点并单击第一个缩略图，您会看到叠加层中出现的大图像向右对齐。现在，如果您打开另一个选项卡，然后返回测试站点，图像将居中（应该是这样）。

有人告诉我，问题出在 Flexslider 为页面加载时不可见的元素分配 0 的宽度。现在 jQuery 真的不是我的菜，但如果有办法解决这个问题，有人能给我一个线索吗？

如果有帮助，这是完整的Flexslider 脚本

Answer 1

您需要告诉 flexslider 在显示时手动调整其大小。就像是：

$(this).data('flexslider').resize();

另外，只是对您网站的建议：您假设所有小于某个宽度的浏览器窗口都是具有触摸功能的手机，并隐藏导航箭头并添加文本“滑动到...”。不是每个人都在他们的 PC 上全屏浏览网页，这会触发你的逻辑。例如，我的电脑没有触摸屏，我不能用它刷卡。如果这是您真正想要做的，您最好检测机器和浏览器是否支持触摸。我的网站使用modernizr 来检测支持触摸的设备。