Bootstrap選項卡中的兩個或多個Flexslider2

Question

創建圖庫頁面時出現問題。我正在使用Bootstrap作爲基礎，並且很好。我查看了各種滑塊和旋轉木馬，並選擇了Flexslider2 - 它的工作原理非常棒，看起來很棒，並且作爲單個滑塊工作得很好。

但是我現在想要使用4個Flexsliders，每個選項卡上都有一個用於圖庫頁面。好的，我可以有4頁，但它只會在1頁上看起來更好。

我對Javascript很新，但知道html（但不是DOM）。下面我的例子就是爲了簡單而設置2個Flexsliders。

當我的頁面觸發初始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> 

有沒有人有任何想法？我期望它是簡單的，但它讓我拉我的頭髮？

Answer 1

玩了一下，似乎你不應該在頁面加載時初始化每個滑塊，而應該分別在每個標籤上調用它。

小提琴：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' 
     }); 
    }); 

希望它可以幫助

Answer 2

我有一個解決方案。

請到

https://github.com/liangrongze/flexslider-compatible-bootstrap-tab

並下載flexslider文件來替換舊的js文件。

它在我的項目中工作。

Answer 3

我解決過，這個工程上flexslider 2.5

我們趕上事件時標籤已經打開，然後初始化flexslider：

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { 
    var selectedTab = $(e.target).attr("href") // activated tab 
    if($(selectedTab + ' .flexslider').length ){ 

     $(window).trigger('resize'); //this should fix for you but you can also try this 


     var carousel_sliders = $(selectedTab + ' .flexslider'); 

     for (var i = 0; i < carousel_sliders.length; i++) { 
      var element = carousel_sliders.eq(i); 
      element.flexslider({ 
       animation: "slide", 
       controlsContainer: $(selectedTab + " .custom-navigation-m .custom-controls-container"), 
       customDirectionNav: $(selectedTab + " .custom-navigation-m a") 
      }); 
     } 



    } 
}); 

Answer 4

一個簡單的解決方案是：

在HTML：

<div class="tab-pane" id="videos" align="center"> 

JS：

$('#video').click(function (e) { 
      e.preventDefault(); 
      $('#slider2').flexslider({ 
       animation: "slide", 
       animationLoop: false, 
       slideshow: false, 
       itemMargin: 5, 
       video: true 
      });