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.

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

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

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 initialized event is triggering before the carousel is fully drawn on the page, so the height is unreliable.

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.

I cannot see any other useful events in the documentation.

Demonstration fiddle

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.

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

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

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 initialized event is triggering before the carousel is fully drawn on the page, so the height is unreliable.

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.

I cannot see any other useful events in the documentation.

Demonstration fiddle

• javascript
• jquery
• owl-carousel-2

• You should provide as snippet to demonstrate this behaviour – jonny Commented Apr 21, 2016 at 15:19
• Why not remove the onInitialized event and rely on the onResized event? – stackErr Commented Apr 21, 2016 at 16:13
• 1 Try it for yourself. On page load resized should not be triggered so you need to trigger it for first initialisation as well – Jonathan Commented Apr 21, 2016 at 16:14
• Using the onRefreshed event: jsfiddle/xfsg53x8/2 – stackErr Commented Apr 21, 2016 at 16:24

3 Answers 3

You can use jQuery's get() method to grab the height of the images (even when they're hidden). This is independent of owlCarousel so don't have to wait for it to finish loading!

var images = $('#carousel img');
var firstImgHeight = images.get(0).height;
$('.page > .container').css('margin-top', firstImgHeight + 15);

Looking through the docs and the demos, I found this page: http://www.owlcarousel.owlgraphic./demos/events.html

It shows that the onRefreshed event is called after onInitialized and after the images have loaded. You can use that.

$('#carousel').owlCarousel({
  items: 1,
  onRefreshed: adjustStretchHeader
});

function adjustStretchHeader () {
    return $('.page > .container')
      .css('margin-top', $('.page > .stretch-header')
        .height() + 15);
}

Fiddle

Although, I agree that the Docs aren't great at explaining the flow of the events. This still feels like a hack to me.

After initialization of carousel, DOMs of images have width but they don't have height until images are actually loaded. Try to use (width)*(aspect ratio) instead of height.

function adjustStretchHeader() {
  return $('.page > .container')
    .css('margin-top', $('.page > .stretch-header')
      .width() * aspectratio + 15);
}