Laravel and Blade dynamic flexslider issues

I am using blade and laravel to create an image gallery. I can loop through an album and get the pictures to appear which is great, and got a bootstrap carousel to work. However I would like to use flexslider2 instead; however it is populated correctly, but it seems to have no height, it appears as a rounded line, with no images.

I have tried force setting the height by changing the css for flexslider 2, and I have also tried using no dynamic loops in the blade template, both of which didn't work. The Flexslider css file and the js file are both there and loading in right.

   <div id="slider" class="flexslider">
      <ul class="slides">
         @foreach ($album->photos as $photo)
         <li data-thumb="slide-thumb.jpg">
            <img src="/storage/photos//"/>
         </li>
         @endforeach
         <!-- items mirrored twice, total of 12 -->
      </ul>
   </div>
   <div id="carousel" class="flexslider">
      <ul class="slides">
            @foreach ($album->photos as $photo)
            <li data-thumb="slide-thumb.jpg">
               <img src="/storage/photos//"/>
            </li>
            @endforeach
         <!-- items mirrored twice, total of 12 -->
      </ul>
   </div>

<script> 
      $(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>

I would have expected the image carousel, populated with my images from the loop, and have the thumbnail slider, however they fail to show: https://gyazo.com/1ff832be8c53e506351ba9f5dd634add

via Chebli Mohamed