Flexslider with Carousel Issue

Hello,
I’m looking for a support forum for Flexslider from WooThemes and this is the only one I came across. I am using Flexslider to create a slider with a carousel. I cannot get it to work properly. When I use the code from the website, all I get are the thumbnails with no navigation and no main image. You can see the problem here: https://mkhomeinteriors.com/boards. The one I created without the carousel works fine: https://mkhomeinteriors.com/before-after

Thank you for any help you can offer.

$(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"
  });
});

<div class="flexslider">
  <ul class="slides">
      <li>
      <img src="images/before-after-14.jpg" />
    </li>
     <li>
      <img src="images/before-after-15.jpg" />
    </li>
    <li>
      <img src="images/before-after-6.jpg" />
    </li>
    <li>
      <img src="images/before-after-7.jpg" />
    </li>
  </ul>
</div>
<div id="carousel" class="flexslider">
  <ul class="slides">
    <li>
      <img src="images/before-after-14.jpg" />
    </li>
    <li>
      <img src="images/before-after-15.jpg" />
    </li>
    <li>
      <img src="images/before-after-6.jpg" />
    </li>
    <li>
      <img src="images/before-after-7.jpg" />
    </li>
  </ul>
</div>