Owl Carousel 2 not visible but no errors

I have been trying for some time to get the Owl Carousel 2 to work on my dev site. I've used it countless times before so clearly I'm doing something silly. I can get v1.x to work.

http://www.creativethings.nz/web/the-house

I have no errors, I am pretty sure it's essentially working but just not showing. Maybe a CSS issue, but I'm using the stock CSS from Owl Carousel 2.

In the head:

<link rel="stylesheet" href="owl2/owl.carousel.css" />
<link rel="stylesheet" href="owl2/owl.theme.default.min.css">

Mid-body:

<div id="gallery" class="owl-carousel owl-theme">
<div><img src="web/images/gallery/sd.jpg"/></div>                                                                                                                                
<div><img src="web/images/gallery/sd.jpg"/></div>                                                                                
</div>

At the end of the body:

<script type="text/javascript" src="owl2/owl.carousel.min.js"></script>  
<script> 
$(window).on('load',function() { 
$(".owl-carousel").owlCarousel();
});
</script>

I observed that by inspecting in Chrome and changing the CSS for .owl-stage-outer to overflow:visible, it shows (both) images in the slideshow alongside each-other. Can anyone help diagnose and resolve?

Solution

You need to set the "items" option when initializing your carousel.

    $(window).on('load',function() { 
      $('.owl-carousel').owlCarousel({items:1});
    });

Working JSFiddle Here