title: jquery Flexslider manual controls is not working
body: <p>I am trying to implement manual controls for the "flexslider" plugin.</p>
  
  <p>Here's my code:  </p>
  
  <pre><code>&lt;body&gt;
  &lt;div class="container"&gt;
      &lt;div class="columns row"&gt;
          &lt;div class="flexslider"&gt;&lt;ul class="slides"&gt;
              &lt;li style="width: 100%; float: left; margin-right: -100%; display: none;"&gt;&lt;img src="1.jpg"&gt;&lt;/li&gt;
              &lt;li style="width: 100%; float: left; margin-right: -100%; display: none;"&gt;&lt;img src="2.jpg"&gt;&lt;/li&gt;
              &lt;li style="width: 100%; float: left; margin-right: -100%; display: none;"&gt;&lt;img src="3.jpg"&gt;&lt;/li&gt;
              &lt;li style="width: 100%; float: left; margin-right: -100%; display: list-item;"&gt;&lt;img src="4.jpg"&gt;&lt;/li&gt;                               
          &lt;/ul&gt;&lt;ol class="flex-control-nav"&gt;&lt;li&gt;&lt;a class=""&gt;1&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class=""&gt;2&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class=""&gt;3&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class="active"&gt;4&lt;/a&gt;&lt;/li&gt;&lt;/ol&gt;&lt;ul class="flex-direction-nav"&gt;&lt;li&gt;&lt;a href="#" class="prev"&gt;Previous&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#" class="next"&gt;Next&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;
      &lt;/div&gt;
  
  
      &lt;div class="columns row"&gt;&lt;h2&gt;&lt;strong&gt;Bla bla bla&lt;/strong&gt; Lorum lorum&lt;/h2&gt;&lt;/div&gt;
  
      &lt;div class="columns row"&gt;
      &lt;div id="thumbnail"&gt;
          &lt;img width="100" border="0" style="margin: 0 16px 0 0" src="1.jpg"&gt;
          &lt;img width="100" border="0" style="margin: 0 16px 0 0" src="2.jpg"&gt;
          &lt;img width="100" border="0" style="margin: 0 16px 0 0" src="3.jpg"&gt;
          &lt;img width="100" border="0" style="margin: 0 16px 0 0" src="4.jpg"&gt;
      &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;script src="http://code.jquery.com/jquery-1.6.4.min.js"&gt;&lt;/script&gt;
  
  &lt;script src="../../javascripts/jquery.flexslider-min.js"&gt;&lt;/script&gt;
  
  &lt;!-- Hook up the FlexSlider --&gt;
  &lt;script type="text/javascript"&gt;
      $(window).load(function() {
          $('.flexslider').flexslider({
              controlNav: true,
              manualControls: "#thumbnail img"
          });
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>  </p>
  
  <p>I want to have thumbnail pictures as slider control. What am I doing wrong?</p>