Add flexslider(s) on Jquery UI tabs - making them work

问题

I have a flexslider working on the first Jquery UI tab, but when I place on the second one its a nogo....anyone know what else you have to add to make this function work? I included a Jfiddle of the one thats not working:

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

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

JFIDDLE

That link had answers but nothing proof working.... I saw Advanced Slider has this method to make it work:

<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>

From this link:

LINK

So I'm wondering if how I would implement this to flexslider.

回答1:

I found a way!

@isherwood thanks your way was close but it did help me figure to set the ui tabs 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;
}

来源：https://stackoverflow.com/questions/18154105/add-flexsliders-on-jquery-ui-tabs-making-them-work