jquery - flexslider 主图像未在 Bootstrap 选项卡中加载

Question

我已将 flexslider 添加到 Bootstrap 选项卡中。但是当我单击选项卡时，它显示缩略图，但不显示主图像。

我在这里创建了一个测试 fiddle http://jsfiddle.net/livewirerules/w39rzo69/6/

我做了一些研究，发现添加调整大小可以解决这个问题，但它似乎对我不起作用

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

我需要确保在移动选项卡时加载完整的 slider ..

任何帮助将不胜感激

Answer 1

您正在初始化 slider ，而 .tab-pane 处于隐藏状态。初始化它或仅触发选项卡显示事件的大小调整:

$(document).on('shown.bs.tab', 'a[data-target="#settings"]', function (e) {
    $('#slider').resize();
});

jsfiddle