Owl Carousel 2 - autoHeight (multiple items)

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. I work around this problem by calling the .active classes on the visible items, and give the invisible items a small height. Is there already a more elegant solution?

by Schakelen

HTML

<script src="https://rawgit.com/OwlFonk/OwlCarousel2/develop/src/js/owl.carousel.js"></script>
<link rel="stylesheet" href="https://cdn.rawgit.com/OwlFonk/OwlCarousel2/develop/src/css/owl.theme.default.css">
<link rel="stylesheet" href="https://rawgit.com/OwlFonk/OwlCarousel2/develop/src/css/owl.carousel.css">
    <div class="owl-carousel">
        <div class="item">
            <img src="http://static.boredpanda.com/blog/wp-content/uploads/2015/05/double-exposure-animal-photography-andreas-lie-1__880.jpg" />
        </div>
        <div class="item">
            <img src="http://static.boredpanda.com/blog/wp-content/uploads/2015/05/double-exposure-animal-photography-andreas-lie-2__880.jpg" />
        </div>
        <div class="item">
            <img src="http://static.boredpanda.com/blog/wp-content/uploads/2015/05/double-exposure-animal-photography-andreas-lie-3__880.jpg" />
        </div>
        <div class="item">
            <img src="http://static.boredpanda.com/blog/wp-content/uploads/2015/05/double-exposure-animal-photography-andreas-lie-4__880.jpg" />
        </div>
        <div class="item">
            <img src="http://static.boredpanda.com/blog/wp-content/uploads/2015/05/double-exposure-animal-photography-andreas-lie-5__880.jpg" />
        </div>
        <div class="item">
            <img src="http://static.boredpanda.com/blog/wp-content/uploads/2015/05/double-exposure-animal-photography-andreas-lie-6__880.jpg" />
        </div>
        <div class="item">
            <img src="http://static.boredpanda.com/blog/wp-content/uploads/2015/05/double-exposure-animal-photography-andreas-lie-7__880.jpg" />
        </div>
        <div class="item">
            <img src="http://static.boredpanda.com/blog/wp-content/uploads/2015/05/double-exposure-animal-photography-andreas-lie-8__880.jpg" />
        </div>
    </div>
    <a class="prev">prev</a>
    <a class="next">next</a>

CSS

.owl-carousel .owl-item {
    background:#CCC;
   	box-sizing: 						border-box;
	-o-box-sizing: 						border-box;
	-ms-box-sizing:						border-box;
	-moz-box-sizing: 					border-box;
	-khtml-box-sizing: 					border-box;
	-webkit-box-sizing: 				border-box;
}
.owl-carousel,
.owl-stage-outer { transition: height 500ms ease-in-out 0s; }

JavaScript

$('.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 () {
        var thisHeight = parseInt( $(this).height() );
        maxHeight=(maxHeight>=thisHeight?maxHeight:thisHeight);
    });
   	$('.owl-carousel').css('height', maxHeight );
    $('.owl-stage-outer').css('height', maxHeight ); // TO CORRECT DRAG-AREA
};

owl = $('.owl-carousel').owlCarousel();
$(".prev").click(function () {
    owl.trigger('prev.owl.carousel');
});
$(".next").click(function () {
    owl.trigger('next.owl.carousel');
});