javascript - 引导选项卡中的两个或多个Flexslider2

我在创建画廊页面时遇到问题。我使用Bootstrap作为基础，并对其进行了完善。我看过各种滑块和旋转木马，并选择了Flexslider2-它的效果很好，外观也很棒，并且可以作为一个单独的滑块工作。

但是，我现在要使用4个Flexsliders，一个图库页面的每个选项卡上一个。好的，所以我可以有4页，但只有1页会更好。

我对Java语言非常陌生，但确实了解html（但不了解DOM）。为了简单起见，我下面的示例仅设置了2个Flexslider。

当我的页面触发时，初始的Flexslider很好，但是当我切换选项卡时，第二个没有显示，没有错误，但是当第二个Flexslider初始化时在屏幕上显示警报时，它就会显示出来。这指向DOM问题，但我似乎找不到解决方案。

HTML;

<div class="row-fluid">
<div class="span9">
  <section id="tabs">
    <div class="bs-docs-example">
        <ul class="nav nav-tabs" id="myTab">
          <li class="active"><a href="#home">Home</a></li>
          <li><a href="#profile">Profile</a></li>
        </ul>
        <div class="tab-content">
          <div class="tab-pane active" id="home">
            <p>this is tab1 (0)</p>
            <section class="slider">
              <div id="slider1" class="flexslider">
                <ul class="slides">
                  <li> <img src="assets/gallery/slide1.jpg" /> </li>
                  <li> <img src="assets/gallery/slide2.jpg" /> </li>
                  <li> <img src="assets/gallery/slide3.jpg" /> </li>
                  <li> <img src="assets/gallery/slide4.jpg" /> </li>
                </ul>
              </div>
              <div id="carousel1" class="flexslider">
                <ul class="slides">
                  <li> <img src="assets/gallery/slide1.jpg" /> </li>
                  <li> <img src="assets/gallery/slide2.jpg" /> </li>
                  <li> <img src="assets/gallery/slide3.jpg" /> </li>
                  <li> <img src="assets/gallery/slide4.jpg" /> </li>
                </ul>
              </div>
            </section>
          </div>
          <div class="tab-pane" id="profile">
            <p>this is tab2 (1)</p>
            <section class="slider">
              <div id="slider2" class="flexslider">
                <ul class="slides">
                  <li> <img src="assets/gallery/slide2.jpg" /> </li>
                  <li> <img src="assets/gallery/slide3.jpg" /> </li>
                  <li> <img src="assets/gallery/slide4.jpg" /> </li>
                  <li> <img src="assets/gallery/slide1.jpg" /> </li>
                </ul>
              </div>
              <div id="carousel2" class="flexslider">
                <ul class="slides">
                  <li> <img src="assets/gallery/slide2.jpg" /> </li>
                  <li> <img src="assets/gallery/slide3.jpg" /> </li>
                  <li> <img src="assets/gallery/slide4.jpg" /> </li>
                  <li> <img src="assets/gallery/slide1.jpg" /> </li>
                </ul>
              </div>
            </section>
          </div>
        </div>
    </div>
    <hr class="bs-docs-separator">
  </section>
</div>
</div>

而JavaScript是;

<script type="text/javascript">
    $('#myTab a').click(function (e) {
    e.preventDefault();
    alert("just about to call initflex");
    initflexsliders();
    $(this).tab('show');
})
</script>

<script type="text/javascript">
   $(window).load(function(){
       initflexsliders();
});
</script>

<script type="text/javascript">
function initflexsliders(){
          $('#carousel1').flexslider({
            animation: "slide",
            controlNav: false,
            animationLoop: false,
            slideshow: false,
            itemWidth: 100,
            itemMargin: 5,
            asNavFor: '#slider1'
          });

          $('#slider1').flexslider({
            animation: "slide",
            controlNav: false,
            animationLoop: false,
            slideshow: false,
            sync: "#carousel1",
          });
          $('#carousel2').flexslider({
            animation: "slide",
            controlNav: false,
            animationLoop: false,
            slideshow: false,
            itemWidth: 100,
            itemMargin: 5,
            asNavFor: '#slider2'
          });

          $('#slider2').flexslider({
            animation: "slide",
            controlNav: false,
            animationLoop: false,
            slideshow: false,
            sync: "#carousel2",
          });
       }
</script>

有人知道吗？我希望这很简单，但是却让我拔头发了吗？

最佳答案

播放了一下，似乎您不应该在页面加载时初始化每个滑块，而应该在每个选项卡上分别调用它。

小提琴：http://jsfiddle.net/qSqpD/709/

$('#myTab a:first-child').click(function (e) {
e.preventDefault();
$(this).tab('show');
  $('#carousel1').flexslider({
        animation: "slide",
        controlNav: false,
        animationLoop: false,
        slideshow: false,
        itemWidth: 400,
        itemMargin: 5,
        asNavFor: '#slider1'
      });
  });

希望能帮助到你