0

2 つの UI タブで flexslider を使用しようとしています。最初のタブでは正しくロードされています。しかし、2 番目のタブでは最後の画像を読み込んでいます。しかし、ブラウザの外側をクリックするか、ブラウザを最小化すると、2番目のタブで最初の画像が読み込まれます。ここにコードがあります

<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

その後、完全に機能します。どこに問題があるか教えてください。

4

1 に答える 1

0

初期化のために何らかの次元計算を必要とするコンポーネントは、非表示のタブでは機能しません。これは、タブ パネル自体が 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」でスライダーを削除し、「show」で次のタブスライダーを初期化しています。それまでに、新しいタブがアクティブ化されて表示されるためです。

于 2013-11-11T06:14:59.330 に答える