Flexslider窗口调整大小的问题

Question

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

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

如果您看到此test site并单击第一个缩略图，则可以看到叠加层中显示的大图像与右侧对齐。现在，如果您打开另一个选项卡，然后返回测试站点，则图像居中（应该如此）。

我被告知问题归结为Flexslider将宽度为0分配给在页面加载时不可见的元素。现在jQuery真的不是我的事，但如果有办法解决这个问题，有人可以给我一些线索吗？

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

Answer 1

您需要告诉flexslider在显示时手动调整大小。类似的东西：

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

此外，只是对您网站的建议：您假设所有小于某个宽度的浏览器窗口都是具有触摸功能的移动设备，并隐藏导航箭头并添加文本“滑动到...”。不是每个人都在PC的全屏幕上浏览网页，它会触发你的逻辑。例如，我的电脑没有触摸屏，我无法用它轻扫。如果机器和浏览器支持触摸，如果这是您真正想做的事情，那么最好还是检测一下。我的网站使用modernizr来检测具有触控功能的设备。