Owl Carousel 2 - autoHeight (multiple items)
Solution 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
Solution 2
I solved it via the internal API using several events calling the same autoHeight-function.
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.
Solution 3
I used flex to solve this issue:
.owl-stage {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
above code for owl-stage
and below for owl-item
class:
.owl-item{
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
height: auto !important;
}
I hope this reply help every body that have this issue.
Schakelen
Updated on April 01, 2020Comments
-
Schakelen about 4 years
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, });
Any Ideas? Thanks!
-
Schakelen about 9 yearsThanks for your great help!! It works nicely, when the item has a given height. Is it possible to scale the stageHeight, according to dynamic item heights? And is there a way to initialize the stageHeight with the height of the first item (on page load)? jsfiddle.net/Schakelen/y18074c0
-
Dennis Helfensteller about 9 yearsI don´t understand as your Fiddle already works with dynamic item heights, I cannot find any fixed heights. And yes, you can init the stageHeight by the first item´s height by using the jQuery :first-selector. https://jsfiddle.net/y18074c0/5/
-
usernotnull about 4 yearsbrilliant! worth mentioning to keep autoHeight: false, otherwise the height of all items will be 0.
-
usernotnull about 4 yearscan you show an example of how to add transition animation please?
-
Meeyam over 3 yearsyou are a LIFESAVER!!!!!! and yes, someone in 2020 was looking!
-
Hung PD over 3 yearsSimply solution but it works like a charm!!! Thank you so much