javascript - 如何在两个 jquery ui 选项卡中使用 flexslider？

Question

我正在尝试在两个 ui 选项卡中使用 flexslider。在第一个选项卡中，它正在正确加载。但在第二个选项卡中，它正在加载最后一个图像。但是，如果我单击浏览器外部或最小化浏览器，则第二个选项卡会加载第一个图像。这是代码

<div id="tabs-1">
                        <div class="flexslider " >
                            <ul class="slides">
                                <li data-thumb="images/1_thumb.jpg">
                                    <img src="images/1.jpg ">

                                </li>
                                <li data-thumb="images/2_thumb.jpg">
                                    <img src="images/2.jpg">

                                <li data-thumb="images/3_thumb.jpg">
                                    <img src="images/3.jpg">

                                </li>
                                <li data-thumb="images/4.jpg">
                                    <img src="images/4.jpg">

                                </li>
                            </ul>
                        </div>
                    </div>

                    <div id="tabs-2">
                        <div class="flexslider" id="slider2" >
                            <ul class="slides">
                                <li data-thumb="images/1_thumb.jpg">
                                    <img src="images/1.jpg ">

                                </li>
                                <li data-thumb="images/2_thumb.jpg">
                                    <img src="images/2.jpg">

                                <li data-thumb="images/3_thumb.jpg">
                                    <img src="images/3.jpg">

                                </li>
                                <li data-thumb="images/4.jpg">
                                    <img src="images/4.jpg">

                                </li>
                            </ul>
                        </div>


                    </div>

脚本：

        $( "#tabs" ).tabs({
  create: function( e, ui ) {
    ui.panel.find( ".flexslider" ).flexslider({
        animation: "slide",
        controlNav: "thumbnails",
       // animationLoop: false,
        slideshow: false

    });
},
beforeActivate: function( e, ui ) {
    ui.oldPanel.find( ".flexslider" ).flexslider( "destroy" );
    ui.newPanel.find( ".flexslider" ).flexslider({
        animation: "slide",
        controlNav: "thumbnails",
        //animationLoop: false,
        slideshow: false

    });
}
});

这是站点链接https://dl.dropboxusercontent.com/u/168659703/zaarly_v2/page1.html。当我设置

  animationLoop: false

然后完美地工作。请告诉我问题出在哪里。

Answer 1

任何需要一些维度计算来初始化的组件都不能在隐藏选项卡中工作，因为选项卡面板本身通过 display: none; 隐藏；这样其中的任何元素都不会报告其实际高度和宽度。（在大多数浏览器中为 0）

这是您的解决方案

$( "#tabs" ).tabs({
 beforeActivate: function( e, ui ) {
     if(ui.oldTab.length>0){
        ui.oldTab.find( ".flexslider" ).flexslider( "destroy" );
     }
 },
 show: function(e,ui){
    $(ui.panel).find( ".flexslider" ).flexslider({
    animation: "slide",
    controlNav: "thumbnails",
    animationLoop: false,
    slideshow: false
    });
 }
});

我正在删除“beforeActivate”中的滑块并在“显示”中初始化下一个选项卡滑块。因为到那时新选项卡已激活并可见。