title: FlexSlider2 with thumbnail control navigation pattern
body: <p>I want to use the FlexSlider with the "thumbnail" control navigation. The problem I can not solve is: the active full sized image is not identical with the active image in the thumbnail navigation (not synchronous). </p>
  
  <p>Clicking at a thumbnail will show the <strong>previous</strong> image and - identical to this behaviour - the <strong>previous</strong> thumbnail is highlighted and not the thumbnail of the current shown image.</p>
  
  <p>Using Bootstrap 3.2.0, jQuery 2.1.1 and FlexSlider 2.2.2. </p>
  
  <p>The following HTML code will be generated:</p>
  
  <pre><code>&lt;div class="flexslider"&gt;
    &lt;div class="flex-viewport" style="overflow: hidden; position: relative;"&gt;
      &lt;ul class="slides" style="width: 1200%; -webkit-transition: 0s; transition: 0s; -webkit-transform: translate3d(-803px, 0px, 0px);"&gt;
        &lt;li class="flex-item clone" data-thumb="/thumbnail/2014-07-13 09.16.49.jpg" style="width: 803px; float: left; display: block;"&gt;
          &lt;img src="/fullsize/2014-07-13 09.16.49.jpg" draggable="false"&gt;
        &lt;/li&gt;
        &lt;li class="flex-item clone" data-thumb="/thumbnail/2014-07-13 09.16.49.jpg" aria-hidden="true" style="width: 803px; float: left; display: block;"&gt;
          &lt;img src="/fullsize/2014-07-13 09.16.49.jpg" draggable="false"&gt;
        &lt;/li&gt;
        &lt;li class="flex-item flex-active-slide" data-thumb="/thumbnail/2014-07-07 09.52.56.jpg" style="width: 803px; float: left; display: block;"&gt;
         &lt;img src="/fullsize/2014-07-07 09.52.56.jpg" draggable="false"&gt;
        &lt;/li&gt;
        &lt;li class="flex-item" data-thumb="/thumbnail/2014-07-09 16.22.35.jpg" style="width: 803px; float: left; display: block;"&gt;
          &lt;img src="/fullsize/2014-07-09 16.22.35.jpg" draggable="false"&gt;
        &lt;/li&gt;
        &lt;li class="flex-item" data-thumb="/thumbnail/2014-07-11 14.28.42.jpg" style="width: 803px; float: left; display: block;"&gt;
          &lt;img src="/fullsize/2014-07-11 14.28.42.jpg" draggable="false"&gt;
        &lt;/li&gt;
        &lt;li class="flex-item" data-thumb="/thumbnail/2014-07-13 09.16.49.jpg" style="width: 803px; float: left; display: block;"&gt;
          &lt;img src="/fullsize/2014-07-13 09.16.49.jpg" draggable="false"&gt;
        &lt;/li&gt;
        &lt;li class="flex-item clone" data-thumb="/thumbnail/2014-07-07 09.52.56.jpg" aria-hidden="true" style="width: 803px; float: left; display: block;"&gt;
          &lt;img src="/fullsize/2014-07-07 09.52.56.jpg" draggable="false"&gt;
        &lt;/li&gt;
        &lt;li class="flex-item clone" data-thumb="/thumbnail/2014-07-07 09.52.56.jpg" style="width: 803px; float: left; display: block;"&gt;
          &lt;img src="/fullsize/2014-07-07 09.52.56.jpg" draggable="false"&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
    &lt;ol class="flex-control-nav flex-control-thumbs"&gt;
      &lt;li&gt;
        &lt;img src="/thumbnail/2014-07-07 09.52.56.jpg" draggable="false" class="flex-active"&gt;
      &lt;/li&gt;
      &lt;li&gt;
        &lt;img src="/thumbnail/2014-07-09 16.22.35.jpg" draggable="false" class=""&gt;
      &lt;/li&gt;
      &lt;li&gt;
        &lt;img src="/thumbnail/2014-07-11 14.28.42.jpg" draggable="false" class=""&gt;
      &lt;/li&gt;
      &lt;li&gt;
        &lt;img src="/thumbnail/2014-07-13 09.16.49.jpg" class="" draggable="false"&gt;
      &lt;/li&gt;
    &lt;/ol&gt;
    &lt;ul class="flex-direction-nav"&gt;
      &lt;li&gt;&lt;a class="flex-prev" href="#"&gt;Previous&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a class="flex-next" href="#"&gt;Next&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and this is the jQuery for the FlexSlider:</p>
  
  <pre><code>$(window).load(function() {
    $('.flexslider').flexslider({
      animation: "slide",
      controlNav: "thumbnails",
      start: function() {
        // get the height for the iFrame from the first image of the slide!
        var height = $('.flexslider img').first().height();
        var frame_id = window.frameElement.getAttribute('id');
        var content_height = height + 60 + 0 + "px";
        parent.document.getElementById(frame_id).style.height = content_height;
      }
    });      
  });
  </code></pre>
  
  <p>I get no error message and I can not see see any problem with the code. The <code>start</code> function in the jQuery is used to set the height of the used iFrame, disabling this function does not change the behaviour. Any idea or a hint for me?</p>
  
  <p><strong>EDIT</strong> - this is the HTML <em>source</em>:</p>
  
  <pre><code>&lt;div class="flexslider"&gt;
      &lt;ul class="slides"&gt;
        &lt;li class="flex-item" data-thumb="/thumbnail/2014-07-13 09.16.49.jpg"&gt;
          &lt;img src="/fullsize/2014-07-13 09.16.49.jpg" /&gt;
        &lt;/li&gt;
        &lt;li class="flex-item" data-thumb="/thumbnail/2014-07-07 09.52.56.jpg"&gt;
          &lt;img src="/fullsize/2014-07-07 09.52.56.jpg" /&gt;
        &lt;/li&gt;
        &lt;li class="flex-item" data-thumb="/thumbnail/2014-07-11 14.28.42.jpg"&gt;
          &lt;img src="/fullsize/2014-07-11 14.28.42.jpg" /&gt;
        &lt;/li&gt;
        &lt;li class="flex-item" data-thumb="/thumbnail/2014-07-09 16.22.35.jpg"&gt;
          &lt;img src="/fullsize/2014-07-09 16.22.35.jpg" /&gt;
        &lt;/li&gt;          
      &lt;/ul&gt;
    &lt;/div&gt; 
  </code></pre>