Callback on owl carousel AFTER fully drawn on page
<p>Imagine you have a single item carousel that sits at the absolute top of the page. Under that, you have the rest of your content. As the carousel is nested arbitrarily deep in the page, you've set it up to be absolutely positioned. But now you need to know how high the carousel is so you can put a top margin on the rest of the content so it does not overlap. This is what I am doing.</p>

<pre><code>$('#carousel').owlCarousel({
  items: 1,
  onInitialized: adjustStretchHeader,
  onResized: adjustStretchHeader
});

function adjustStretchHeader () {
  setTimeout(function () {
    return $('.page &gt; .container')
      .css('margin-top', $('.page &gt; .stretch-header')
        .height() + 15);
  }, 250);
}
</code></pre>

<p>On the initialisation of the carousel and on resize events, I am getting it to get the carousel's height and update the top margin. The problem is that, without having a delay, the <code>initialized</code> event is triggering before the carousel is fully drawn on the page, so the height is unreliable.</p>

<p>With a delay, I'm able to get it properly. But this is obviously a hack, and I cannot guarantee that on slower devices, the carousel will have been drawn in time.</p>

<p>I cannot see any other useful events in the <a href="http://www.owlcarousel.owlgraphic.com/docs/api-events.html" rel="nofollow">documentation</a>.</p>

<p><a href="https://jsfiddle.net/defayeke/xfsg53x8/" rel="nofollow">Demonstration fiddle</a></p>