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）

这是您的solution

$( "#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”中的滑块并初始化“show”中的下一个标签滑块。因为那时新的Tab被激活并可见。

如何在两个jquery ui标签中使用flexslider？

1 个答案: