title: Woothemes Flexslider - one unique flexslider inside another flexslider - is it posible?
body: <p>I am using the newest flexslider from Woothemes, and I am trying to init one flexslider inside another. Like this:</p>
  
  <pre><code>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  
              });
  
  
          }   
      });
  }       
  </code></pre>
  
  <p>but when I call the script, is generates flexsliderFrontpage02 ul below flexsliderFrontpage01 and not inside the slide (list element) - like this:</p>
  
  <pre><code>&lt;div id="flexsliderFrontpage01" class="flexslider"&gt;
      &lt;div class="flex-viewport"&gt;
  
        &lt;ul class="slides"&gt;
          &lt;li&gt;
            &lt;div class="row"&gt;
               &lt;div id="flexsliderFrontpage02" class="flexslider"&gt; SLIDES SHOULD BE HERE &lt;/div&gt;
            &lt;/div&gt;
          &lt;/li&gt;
          &lt;li&gt;
            &lt;div class="row"&gt;slide 2&lt;/div&gt;
          &lt;/li&gt;  
        &lt;/ul&gt;  
  
        &lt;ul class="slides"&gt;
          &lt;li&gt;&lt;div class="row"&gt;fade 1&lt;/div&gt;&lt;/li&gt;
          &lt;li&gt;&lt;div class="row"&gt;fade 2&lt;/div&gt;&lt;/li&gt;
          &lt;li&gt;&lt;div class="row"&gt;fade 3&lt;/div&gt;&lt;/li&gt;  
        &lt;/ul&gt; 
     &lt;/div&gt;
  
     &lt;ol class="flex-control-nav flex-control-paging"&gt;
       &lt;li&gt;1&lt;/li&gt;
       &lt;li&gt;2&lt;/li&gt;
       &lt;li&gt;3&lt;/li&gt;
       &lt;li&gt;4&lt;/li&gt;
       &lt;li&gt;5&lt;/li&gt;
     &lt;/ol&gt;
  
     &lt;ul class="flex-direction-nav"&gt; &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Do any of you know if theres an easy fix to flexslider.js or am I doing something wrong ? :-)</p>
  
  <p>my HTML looks like this:</p>
  
  <pre><code>&lt;div class="flexslider" id="flexsliderFrontpage01"&gt;
  &lt;ul class="slides"&gt;
      &lt;li&gt;
          &lt;div class="row"&gt;
              &lt;div class="flexslider" id="flexsliderFrontpage02"&gt;
                  &lt;ul class="slides"&gt;
                      &lt;li&gt;&lt;div class="row"&gt;fade div 1&lt;/div&gt;&lt;/li&gt;          
                      &lt;li&gt;&lt;div class="row"&gt;fade div 2&lt;/div&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;div class="row"&gt;fade div 3&lt;/div&gt;&lt;/li&gt;      
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/li&gt;
  
  
      &lt;li&gt;
          &lt;div class="row"&gt;   
              &lt;h1&gt;This is slide 2&lt;/h1&gt;
          &lt;/div&gt;
      &lt;/li&gt;
  
  &lt;/ul&gt;           
  &lt;/div&gt; 
  </code></pre>
  
  <p>I have solved it by using this example <a href="https://github.com/woothemes/FlexSlider/issues/36" rel="nofollow">here</a>:</p>
  
  <pre><code>Flexslider.js update
  slider.container = $(slider.containerSelector, slider).first(); //added .first()
  selector: ".slides:first &gt; li", //added :first
  </code></pre>
  
  <p>Maybe this can help someone else :-)</p>