2013-02-08 2 views
2

나는 Woothemes에서 최신 flexslider를 사용하고 있으며 다른 하나의 flexslider를 초기화하려고합니다.Woothemes Flexslider - 다른 flexslider 내부의 유일한 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 
      }); 


     } 
    }); 
}  

내가 스크립트를 호출 할 때, 슬라이드 (목록 요소) 내부 flexsliderFrontpage01 아래 flexsliderFrontpage02 UL를 생성하지 않습니다 -이 같은을 :이처럼

<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은 다음과 같습니다 :-) :이 예 here 사용하여 해결 한

<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> 

:

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

어쩌면이 다른 사람 :-) 도움이 될 수를

답변

1

기본 선택기를 ".slides > li"에서 ".slides:first > li"으로 변경하면 다음과 같습니다.

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

그것은 매력처럼 작동합니다. 핵심 js 파일을 변경할 필요조차 없습니다. the issue dicussion에 감사드립니다.