Thumbnail slider problem

Hello. I got the standard slider working, but when I try to add a thumbnail slider at the bottom, the main slider disappears and only the thumbnails (static) appear. I am sure I have done something wrong with my coding, but I am new to this and not sure how to fix it. I have tried several things but cannot resolve the problem. I would appreciate any help i can get.

The code in my <head> tag is:

<!-- Place in the <head>, after the three links -->
<script type="text/javascript">
 $(window).load(function() {
  // The slider being synced must be initialized first
  $('#carousel').flexslider({
    animation: "slide",
    controlNav: false,
    animationLoop: false,
    slideshow: false,
    itemWidth: 210,
    itemMargin: 5,
    asNavFor: '#slider'
  });

  $('#slider').flexslider({
    animation: "slide",
    controlNav: false,
    animationLoop: false,
    slideshow: false,
    sync: "#carousel"
  });
});
</script>

and the html is:

 <!-- Place somewhere in the <body> of your page -->
<div id="slider" class="flexslider">
  <ul class="slides">
    <li>
      <img src="slideshow/slide005.jpg" alt="Annan House at Kinmount Castle. Holiday home image 5"/>
    </li>
    <li>
     <img src="slideshow/slide006.jpg" alt="Annan House at Kinmount Castle. Holiday home image 6"/>
    </li>
    <li>
      <img src="slideshow/slide007.jpg" alt="Annan House at Kinmount Castle. Holiday home image 7"/>
    </li>
    <li>
       <img src="slideshow/slide008.jpg" alt="Annan House at Kinmount Castle. Holiday home image 8"/>
    </li>
    <!-- items mirrored twice, total of 12 -->
  </ul>
</div>
<div id="carousel" class="flexslider">
  <ul class="slides">
    <li>
    <img src="slideshow/slide005.jpg" alt="Annan House at Kinmount Castle. Holiday home image 5"/>
    </li>
    <li>
 <img src="slideshow/slide006.jpg" alt="Annan House at Kinmount Castle. Holiday home image 6"/>
    </li>
    <li>
    <img src="slideshow/slide007.jpg" alt="Annan House at Kinmount Castle. Holiday home image 7"/>
    </li>
    <li>
       <img src="slideshow/slide008.jpg" alt="Annan House at Kinmount Castle. Holiday home image 8"/>
    </li>
    <!-- items mirrored twice, total of 12 -->
  </ul>
</div>

All of which I found at: http://flexslider.woothemes.com/thumbnail-slider.html

I have attached two screenshots. One showing the basic working, and one showing what happens when I try to add the thumbnail slider at the bottom

Many thanks in advance

Tog

woocommerce / FlexSlider

Thumbnail slider problem #1663