Woothemes Flexslider - 一個獨特的flexslider內的另一個flexslider - 它是否可行？

Question

我正在使用Woothemes中最新的flexslider，並且我正試圖在另一個flex內部啓動一個flexslider。就像這樣：

function initFrontpageSliders() { 

    $('#flexsliderFrontpage01').flexslider({ 
     animation: "slide", 
     animationLoop: false, 
     pauseOnHover: true, 

     start: function(slider) { 

      //Fires when the slider loads the first slide 
      $('#flexsliderFrontpage02').flexslider({ 
       animation: "fade", 
       directionNav: false, 
       animationLoop: false, 
       pauseOnHover: true 
      }); 


     } 
    }); 
}  

但是當我調用腳本，是產生flexsliderFrontpage02 UL以下flexsliderFrontpage01而不是幻燈片（列表元素）裏面 - 就像這樣：

<div id="flexsliderFrontpage01" class="flexslider"> 
    <div class="flex-viewport"> 

     <ul class="slides"> 
     <li> 
      <div class="row"> 
      <div id="flexsliderFrontpage02" class="flexslider"> SLIDES SHOULD BE HERE </div> 
      </div> 
     </li> 
     <li> 
      <div class="row">slide 2</div> 
     </li> 
     </ul> 

     <ul class="slides"> 
     <li><div class="row">fade 1</div></li> 
     <li><div class="row">fade 2</div></li> 
     <li><div class="row">fade 3</div></li> 
     </ul> 
    </div> 

    <ol class="flex-control-nav flex-control-paging"> 
    <li>1</li> 
    <li>2</li> 
    <li>3</li> 
    <li>4</li> 
    <li>5</li> 
    </ol> 

    <ul class="flex-direction-nav"> </ul> 
</div> 

做任何你知道，如果那裏有一個簡單的修復flexslider.js或我做錯了什麼？ :-)

我的HTML看起來像這樣：

<div class="flexslider" id="flexsliderFrontpage01"> 
<ul class="slides"> 
    <li> 
     <div class="row"> 
      <div class="flexslider" id="flexsliderFrontpage02"> 
       <ul class="slides"> 
        <li><div class="row">fade div 1</div></li>   
        <li><div class="row">fade div 2</div></li> 
        <li><div class="row">fade div 3</div></li>  
       </ul> 
      </div> 
     </div> 
    </li> 


    <li> 
     <div class="row"> 
      <h1>This is slide 2</h1> 
     </div> 
    </li> 

</ul>   
</div> 

我以這個例子here解決它：

Flexslider.js update 
slider.container = $(slider.containerSelector, slider).first(); //added .first() 
selector: ".slides:first > li", //added :first 

也許這可以幫助別人:-)

Answer 1

我只是將".slides > li"的默認選擇器更改爲".slides:first > li"，如下所示：

$(selector).flexslider({ 
    selector: '.slides:first > li', 
    ... 
}); 

它就像一個魅力，我們甚至不需要更改核心js文件。感謝the issue的討論。