Can't get Basic Slider with ControlNav thumbnails to work

[ian5142]

Here is a portion of my html:

<link rel="stylesheet" href="/js/flexslider.css" type="text/css" />
<script defer src="/js/jquery.flexslider.js"></script>
  <script type="text/javascript">
   $(window).load(function() {
  $('.flexslider').flexslider({
    animation: "slide",
    controlNav: "thumbnails"
  });
});
  </script>

Then this is in the body:

<div class="flexslider">
        <ul class="slides">
            <li data-thumb="/images/2A_bedroom_thumb.jpg">
                <!--<p class="flex-caption">Cottage 2A Bedroom</p>-->
                <img class="topImageSlider" src="/images/2A_bedroom.jpg" alt="Cottage 2A Bedroom"/>
            </li>
            <li data-thumb="/images/2A_livingroom_thumb.jpg">
                <!--<p class="flex-caption">Cottage 2A Livingroom</p>-->
                <img class="topImageSlider" src="/images/2A_livingroom.jpg" alt="Cottage 2A Livingroom"/>
            </li>
        </ul>
    </div>

Class topImageSlider is to size image to fit within the outside div (not shown). I did have to change where the next and previous arrows were displayed as well (changed in the flexslider.css file).