title: jQuery Flexslider — can't see navigational images (manualControl)
body: <p>I've spent a lot of time looking at the post on 3/13/12 re: manual controls, but isn't getting me all the way there...probably because I don't know jquery. Sorry, newbie on board.</p>
  
  <p>I'm trying to get the right/left arrows to show, as well as the 1, 2, 3...at the bottom. They are there, I see the lists on Firebug, just don't know how to add them to the "hook" (?) so they appear.  </p>
  
  <p><strong>Here is the code I have in header:</strong></p>
  
  <pre><code>&lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"&gt;&lt;/script&gt; 
  
  &lt;script src="jquery.flexslider.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" charset="utf-8"&gt;
          $(window).load(function() {
          $('.flexslider').flexslider({
          animation: "slide",
          slideshow: false,
          controlNav: true,
               manualControls: ".flex-control-nav li a",
          controlsContainer: ".flex-container"
       });
       });
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>Here is my html:</strong></p>
  
  <pre><code>&lt;div class="flex-container"&gt;           
      &lt;div class="flexslider"&gt;
        &lt;ul class="slides"&gt;
              &lt;li&gt;&lt;img src="images/tah_home.jpg" alt="taylor art house home page" width="600" height="320"/&gt;
              &lt;p class="flex-caption"&gt;Taylor Art House Home Page&lt;/p&gt;&lt;/li&gt;
  
              &lt;li&gt;&lt;img src="images/tah_blog.jpg" alt="taylor art house blog page" width="600" height="320" /&gt;
              &lt;p class="flex-caption"&gt;We created a blog that fits seemlessly into Taylor Art House's look&lt;/p&gt;&lt;/li&gt;
  
              &lt;li&gt;&lt;img src="images/tah_artwork_page.jpg" alt="taylor art house art page" width="600" height="320" /&gt;
              &lt;p class="flex-caption"&gt;One of Taylor Art House's gallery pages, using a Wordpress plugin&lt;/p&gt;&lt;/li&gt;
  
              &lt;li&gt;&lt;img src="images/tah_arch_portfolio.jpg" alt="jon taylor architecture portfolio page" width="600" height="320" /&gt;
              &lt;p class="flex-caption"&gt;We created links to toggle from TAH to Jon Taylor Architecture&lt;/p&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;&lt;!--end flexsider--&gt; 
  &lt;/div&gt;&lt;!--end flex-container--&gt; 
  </code></pre>
  
  <p><strong>Here is the Flexslider CSS:</strong></p>
  
  <pre><code>/*
   * jQuery FlexSlider v1.8
   * http://www.woothemes.com/flexslider/
   *
   * Copyright 2012 WooThemes
   * Free to use under the MIT license.
   * http://www.opensource.org/licenses/mit-license.php
   */
  
  /* Browser Resets */
  .flex-container a:active,
  .flexslider a:active,
  .flex-container a:focus,
  .flexslider a:focus  {outline: none;}
  .slides,
  .flex-control-nav,
  .flex-direction-nav {margin: 0; padding: 0; list-style: none;}
  
  /* FlexSlider Necessary Styles
  *********************************/
  .flexslider {
      width: 100%; 
      margin: 0; 
      padding: 0;
  }
  
  .flexslider .slides &gt; li {
      display: none; 
      -webkit-backface-visibility: hidden;
  } 
  
  /* Hide the slides before the JS is loaded. Avoids image jumping */
  .flexslider .slides img {
      max-width: 100%; 
      display: block;
  }
  
  .flex-pauseplay span {
      text-transform: capitalize;
  }
  
  /* Clearfix for the .slides element */
  .slides:after {
      content: "."; 
      display: block; 
      clear: both; 
      visibility: hidden; 
      line-height: 0;
      height: 0;
  }
  
  html[xmlns] .slides {
      display: block;
  }
  
  * html .slides {
      height: 1%;
  }
  
  /* No JavaScript Fallback */
  /* If you are not using another script, such as Modernizr, make sure you
   * include js that eliminates this class on page load */
  .no-js .slides &gt; li:first-child {
      display: block;
  }
  
  
  /* FlexSlider Default Theme
  *********************************/
  .flexslider {
      width: 600px;
      background: #fff;
      border: 4px solid #999; 
      position: relative; 
      margin: 30px 0;
      -webkit-border-radius: 5px; 
      -moz-border-radius: 5px; 
      -o-border-radius: 5px; 
      border-radius: 5px; zoom: 1;
  }
  
  .flexslider .slides {
      zoom: 1;
   }
  
  .flexslider .slides &gt; li {
      position: relative;
  }
  
  /* Suggested container for "Slide" animation setups. Can replace this with your own, if you wish */
  .flex-container {
      zoom: 1; 
      position: relative;
      margin-left:100px;
  }
  
  /* Caption style */
  /* IE rgba() hack */
  .flex-caption {
      background:none; 
      -ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000);
      filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000); 
      zoom: 1;
  }
  
  .flex-caption {
      width: 96%; 
      padding: 2%; 
      margin: 0; 
      position: absolute; 
      left: 0; 
      bottom: 0; 
      background: rgba(0,0,0,.3); 
      color: #fff; 
      text-shadow: 0 -1px 0 rgba(0,0,0,.3); 
      font-size: 14px; 
      line-height: 18px;
  }
  
  /* Direction Nav */
  .flex-direction-nav { 
      height: 0; 
  }
  
  .flex-direction-nav li a {
      width: 52px; 
      height: 52px; 
      margin: -13px 0 0; 
      display: block; 
      background: url(theme/bg_direction_nav.png) no-repeat; 
      position: absolute; 
      top: 50%; 
      cursor: pointer; 
      text-indent: -999em;
  }
  
  .flex-direction-nav li .next {
      background-position: -52px 0; right: -21px;
  }
  
  .flex-direction-nav li .prev {
      left: -20px;
  }
  
  .flex-direction-nav li .disabled {
      opacity: .3; 
      filter:alpha(opacity=30); 
      cursor: default;
  }
  
  /* Control Nav */
  .flex-control-nav {
      width: 100%; 
      position: absolute; 
      bottom: -30px; 
      text-align: center;
  }
  
  .flex-control-nav li {
      margin: 0 0 0 5px; 
      display: inline-block; 
      zoom: 1; 
      *display: inline;
  }
  
  .flex-control-nav li:first-child {
      margin: 0;
  }
  
  .flex-control-nav li a {
      width: 13px; 
      height: 13px; 
      display: block; 
      background: url(theme/bg_control_nav.png) no-repeat; 
      cursor: pointer; 
      text-indent: -999em;
  }
  
  .flex-control-nav li a:hover {
      background-position: 0 -13px;
  }
  
  .flex-control-nav li a.active {
      background-position: 0 -26px; 
      cursor: default;
  }
  </code></pre>
  
  <p><strong>Here is how it appears in Firebug:</strong></p>
  
  <pre><code>&lt;div class="flex-container"&gt;
  &lt;div class="flexslider" style="overflow: hidden;"&gt;
  &lt;ul class="slides" style="width: 1200%; margin-left: -1800px;"&gt;
  &lt;li class="clone" style="width: 600px; float: left; display: block;"&gt;
  &lt;li style="width: 600px; float: left; display: block;"&gt;
  &lt;li style="width: 600px; float: left; display: block;"&gt;
  &lt;li style="width: 600px; float: left; display: block;"&gt;
  &lt;li style="width: 600px; float: left; display: block;"&gt;
  &lt;li class="clone" style="width: 600px; float: left; display: block;"&gt;
  &lt;/ul&gt;
  &lt;/div&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;li&gt;
  &lt;li&gt;
  &lt;/ol&gt;
  &lt;ul class="flex-direction-nav"&gt;
  &lt;li&gt;
  &lt;a class="prev" href="#"&gt;Previous&lt;/a&gt;
  &lt;/li&gt;
  &lt;li&gt;
  &lt;a class="next" href="#"&gt;Next&lt;/a&gt;
  &lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Finally, here is a link to the jsFiddle file (I saw someone wanted that in other flexslider post):</strong>
  <a href="http://jsfiddle.net/kthms/Wxmsp/" rel="nofollow">http://jsfiddle.net/kthms/Wxmsp/</a></p>
  
  <p><strong>Link to page: <a href="http://www.kajortdesigns.com/tah.php" rel="nofollow">http://www.kajortdesigns.com/tah.php</a></strong></p>
  
  <p>I've tried every combo of class from the CSS in the manualControl: "", but I'm just guessing. </p>
  
  <p>If anyone can help this newbie out, I would be very appreciative. Explicit instructions are always appreciated.</p>