Flexslider w/thumbnail controlNav - not syncing

I've been going mad trying to find what I'm doing wrong here. To the point where I've just set up a test html page, with the EXACT code and images from the demo page http://flexslider.woothemes.com/thumbnail-controlnav.html

<link rel="stylesheet" href="flexslider.css" type="text/css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="jquery.flexslider.js" type="text/javascript"></script>
<script type="text/javascript">

// Can also be used with $(document).ready()
$(window).load(function() {
    animation: "slide",
    controlNav: "thumbnails"


<div class="flexslider">
    <ul class="slides">
         <li data-thumb="slide1-thumb.jpg">
          <img src="slide1.jpg" />
        <li data-thumb="slide2-thumb.jpg">
          <img src="slide2.jpg" />
        <li data-thumb="slide3-thumb.jpg">
          <img src="slide3.jpg" />
        <li data-thumb="slide4-thumb.jpg">
          <img src="slide4.jpg" />

It looks as if everything is fine apart from the fact that in my 4 image gallery, the Flexslider is highlighting thumbnail 1 and displaying image 4, then highlighting thumbnail 2 and displaying image 1 etc.

thumbnail 1 displays image 4 thumbnail 2 displays image 1 thumbnail 3 displays image 2 thumbnail 4 displays image 3 then it loops around.

Does anyone have any idea?

Please save my head!

Demo of above code


This issue happens to me. When I checked my downloaded files (woothemes-FlexSlider-version-2.2.2-0-gce5441b) I noticed that the demo page (thumbnail-controlnav.html) shows incorrect order of images. What I did, I compare it to the live site http://flexslider.woothemes.com/thumbnail-controlnav.html and update my copy of the script jquery.flexslider.js then it works fine!

Need Your Help

How to read large XML file consisting of large number of small items efficiently in Java?

java xml parsing dom sax

I have a large XML file that consists of relatively fixed size items i.e.