Owl Carousel 2 - autoHeight (multiple items)

Question

AutoHeight Owl Carousel currently only works with 1 item per screen. Their plan is to calculate all visible objects and change the height according to the highest value.

I am working on this issue by calling .active classes for visible elements and giving the invisible elements a small height. Is there an even more elegant solution?

$('.owl-carousel').owlCarousel({
loop: true,
items: 3,
margin: 1,
autoHeight: true,
});

Fiddle

Any ideas? Thank!

Answer 1

I solved it through the internal API using several events that call the same autoHeight function.

Fiddle

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
}

height CSS:

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

, .

Answer 2

. autoWidth: true, !

script:

 $('.owl-carousel').owlCarousel({
  loop: false,
  margin: 10,
  items: 1,
  autoHeight: true,
  autoWidth: true,
  nav: true,
  navText: [
    "<i class='fa fa-caret-left'></i>",
    "<i class='fa fa-caret-right'></i>"
  ],
  autoplay: true,
  autoplayHoverPause: true,
  responsive: {
    0: {
      items: 1
    },
    600: {
      items: 3
    },
    1000: {
      items: 5
    }
  }
})