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'm not sure if anyone is still looking for solutions for this problem in 2020, but after trying a lot of things that didn't work, I found a very simple one. It's all about setting no height to the item that's not active.

Like so:

.owl-item {height: 0;}    
.owl-item.active {height: auto;}

It's elegant and no javascript is needed. You can even play with transitions to set some cool animations.

I hope I have helped someone here.

PS: To use this method, keep autoHeight: false ... otherwise the carousel height will be set to 0 by the library