Xtykutl

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?

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

    $(window).on('load',function() { 

      $('.owl-carousel').owlCarousel({items:1});

    });

Working JSFiddle Here