Owl Carousel 2 - autoHeight (multiple items)

javascript jquery height owl-carousel owl-carousel-2

Schakelen · Apr 21, 2015 · Viewed 22.3k times · Source

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?

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

Fiddle

Any Ideas? Thanks!

Answer

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

Owl Carousel 2 - autoHeight (multiple items)

Answer

Related questions