javascript - jQuery タブでスライダーが機能しない

Question

jQuery タブで 2 つの jQuery Flexslider を使用したいと考えています。タブ 1 のスライダーは正常に動作しますが、タブ 2 では動作しません。

JSFiddle のコードの完全なデモは次のとおりです。

デモ：

http://jsfiddle.net/vH5DT/

jQuery コード:

$(document).ready(function() {

    $('#tabvanilla').tabs({
        hide: "heightFade",
        show: "heightFade",
        collapsible: true
    });

    $('#flexslider1').flexslider({
        animation: "slide",
        slideshow: true,
        controlsContainer: ".flex-container1",
        directionNav: true,
        controlNav: true
    });

    $('#flexslider2').flexslider({
        animation: "slide",
        slideshow: true,
        controlsContainer: ".flex-container2",
        directionNav: true,
        controlNav: true
    });

    });

HTML:

<div id="tabvanilla">
    <ul class="tabnav">
      <li><a href="#tab1">Tab1</a></li>
      <li><a href="#tab2">Tab2</a></li>
    </ul>

    <div id="tab1" class="cf">
      <div id="flexslider1" class="flexslider">

        <ul class="slides">
          <li><img src="" /></li>
          <li><img src="" /></li>
          <li><img src="" /></li>
        </ul>

      </div>
      <div class="flex-container1"></div>

    </div><!-- div#tab1 -->

  <div id="tab2">
       <div id="flexslider2" class="flexslider">
        <ul class="slides">
            <li><img src="" /></li>
            <li><img src="" /></li>
            <li><img src="" /></li>
         </ul>

        <div class="flex-container2"></div>
      </div>

    </div><!-- div#tab2 -->
  </div><!-- div#tabvanilla -->

Answer 1

表示されたら（タブの変更時に）flexsliderを初期化する必要があります

私はあなたがこのようなことができると思います:

$('#tabvanilla').tabs({
    hide: "heightFade",
    show: "heightFade",
    collapsible: true,
    select: function(event, ui) {
        switch (ui.index) {
            case 0:
                // nothing to do since this is selected by default on page load
                break;
            case 1:
                $('#flexslider2').flexslider({
                    animation: "slide",
                    slideshow: true,
                    controlsContainer: ".flex-container2",
                    directionNav: true,
                    controlNav: true
                });
                break;
        }
    }
});

Answer 2

スライダー スクリプトが非表示の要素を処理できないという問題には、いくつかの方法があります。タブをクリックするたびにスライダー スクリプトを再初期化するか、

position: absolute;
left: -999em;

その後

left: auto;

それよりも

display: none;

タブ用。

Answer 3

私にとってうまくいく別のソリューションに貢献したいと思います。私はコードに飛び込み、firebug を使用して Andres が正しいことを発見しました。問題は、すべての隠し要素があるためです

最初は幅が 0 に設定されています。firebug を開くと、すべて正常に動作し、hiddens

適切な幅を取ります。さて、私はそれを行います:クリックイベントとトランジションの後にこのコードを置きました:

fixWidth = $next_slide.css('width'); // I take the width of the new active slide
$flexslide_tab = $next_slide.find('.flexslider'); // Localize flexslider inside active tab
$ul = $flexslide_tab.find('.slides'); // Localize <li> container
$lis = $ul.find('li'); // Get all <li> elements
$lis.each(function(i,elem) {
    $(this).css('width',fixWidth); // I adjust every <li> width from the new slide
});

役に立つことを願っています。