在Jquery UI标签上添加flexslider（s），使它们工作 [英] Add flexslider(s) on Jquery UI tabs - making them work

问题描述

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

  $ （'#slider'）。flexslider（{
 animation：slide，
 controlNav：false，
 animationLoop：false，
 slideshow：false 
} 
 
 $（'＃slider2'）。flexslider（{
 animation：slide，
 controlNav：false，
 animationLoop：false，
幻灯片：false 
}）; 
  

JFIDDLE

该链接有答案，但没有任何证据工作....我看到高级滑块有这种方法：

 < 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 =='block'）{
 $（'。advanced-slider'）。advancedSlider（）。doSliderLayout（）; 
 clearInterval（interval）; 
} 
}，100 ）; 
} 
}}）; 
}）; 
< / script> 
  

从此链接：

LINK

$

解决方案

我想知道如何实现这个flexslider。找到了办法！

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

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.

解决方案

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

这篇关于在Jquery UI标签上添加flexslider（s），使它们工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！