滑块在 jQuery 选项卡中不起作用

2022-01-24 00:00:00 slider jquery javascript jquery-ui flexslider

我想在 jQuery 选项卡中使用 2 个 jQuery Flexslider.选项卡 1 上的滑块可以正常工作，但不能在选项卡 2 中工作.

I want to use 2 jQuery Flexsliders in the jQuery tabs. The slider on the tab 1 works fine, but it does not work in the tab 2.

以下是 JSFiddle 上代码的完整演示:

Here is the full demo of the code on 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 -->

推荐答案

你需要在可见时初始化你的 flexslider(在标签更改时)

You'll need to init your flexslider when visible (on tab change)

我认为你可以这样做:

$('#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;
        }
    }
});

相关文章