Owl Carousel 2 - autoHeight (multiple items)

Question

At the moment the Owl Carousel autoHeight works only with 1 item on screen. Their plan is to calculate all visible items and change height according to highest item.

<

Answer 1

I solved it via the internal API using several events calling the same autoHeight-function.

Fiddle

The jQuery-Part:

$('.owl-carousel').owlCarousel({
    loop: true,
    items: 3,
    margin: 1,
    autoHeight: true,
    onInitialized: setOwlStageHeight,
    onResized: setOwlStageHeight,
    onTranslated: setOwlStageHeight
});
function setOwlStageHeight(event) {
    var maxHeight = 0;
    $('.owl-item.active').each(function () { // LOOP THROUGH ACTIVE ITEMS
        var thisHeight = parseInt( $(this).height() );
        maxHeight=(maxHeight>=thisHeight?maxHeight:thisHeight);
    });
    $('.owl-carousel').css('height', maxHeight );
    $('.owl-stage-outer').css('height', maxHeight ); // CORRECT DRAG-AREA SO BUTTONS ARE CLICKABLE
}

For enabling the height-animation I added the following CSS:

.owl-carousel,
.owl-stage-outer { transition: height 500ms ease-in-out 0s; }

Hope it helps.