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

时间:2013-08-09 19:18:36

标签: jquery css html5 jquery-ui flexslider

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

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

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

JFIDDLE

该链接有答案,但没有任何证据可行......我看到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>

从这个链接:

LINK

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

1 个答案:

答案 0 :(得分:0)

我找到了办法!

@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;
}