jquery - 在 Jquery UI 选项卡上添加 flexslider(s) - 使它们工作

Question

我有一个在第一个 Jquery UI 选项卡上工作的 flexslider，但是当我放在第二个上时，它是一个 nogo....任何人都知道你还需要添加什么才能使这个功能工作吗？我包括了一个不起作用的Jfiddle：

$('#slider').flexslider({
                animation: "slide",
                controlNav: false,
                animationLoop: false,
                slideshow: false
            });

$('#slider2').flexslider({
                animation: "slide",
                controlNav: false,
                animationLoop: false,
                slideshow: false
            });

小提琴手

该链接有答案，但没有任何证据证明有效....我看到 Advanced Slider 有这种方法可以使它工作：

<script type="text/javascript">
jQuery(document).ready(function($) {
     $(".ui-tabs").tabs({ select: function (event, ui) {
          if ($(ui.panel).find('.advanced-slider').length) {
               var interval = setInterval(function() {
                    if ($(ui.panel).css('display') == 'block') {
                         $('.advanced-slider').advancedSlider().doSliderLayout();
                         clearInterval(interval);
                    }
               }, 100);
          }
     }});
});
</script>

从这个链接：

关联

所以我想知道如何将它实现到 flexslider。

Answer 1

我找到了一个方法！

@isherwood 谢谢你的方式很接近，但它确实帮助我设置了 ui 标签 css：

.ui-tabs__panel {
    display: block !important;
    position: absolute;
    opacity: 0;
    z-index:0;
    top: 5em;
    left: -9999em
}

.ui-tabs__panel--active {
    opacity: 1;
    z-index:1;
    left: 0;
}