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.

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!

Why don't using yours `style="height : 450px"` and set this value for all the div ? — Anwar, Apr 21 '15 at 10:32
I'm using images with different heights and I don't want the whitespace to appear underneath the carousel. — Schakelen, Apr 21 '15 at 10:41
You need to set a height to the hole OwlCarousel, or to its items ? — Anwar, Apr 21 '15 at 10:46
The height of the Owl Carousel needs to be the same as the height of the highest visible image, and update itself on the go.. — Schakelen, Apr 21 '15 at 10:48

score 17 · Answer 1 · edited Mar 31 '20 at 11:34

17

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

edited Mar 31 '20 at 11:34

usernotnull

3,480
4
25
40

answered Feb 13 '20 at 12:32

Johnny

459
3
5

brilliant! worth mentioning to keep autoHeight: false, otherwise the height of all items will be 0. – usernotnull Mar 31 '20 at 08:56
can you show an example of how to add transition animation please? – usernotnull Mar 31 '20 at 09:17
you are a LIFESAVER!!!!!! and yes, someone in 2020 was looking! – Meeyam Oct 22 '20 at 22:58
Simply solution but it works like a charm!!! Thank you so much – Hung PD Jan 14 '21 at 03:47

score 6 · Answer 2 · edited Feb 16 '17 at 12:56

6

I solved it via the internal API using several events calling the same autoHeight-function.

Fiddle

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.

edited Feb 16 '17 at 12:56

Ionică Bizău

109,027
88
289
474

answered May 05 '15 at 15:24

Dennis Helfensteller

81
3

Thanks 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)? https://jsfiddle.net/Schakelen/y18074c0/ – Schakelen May 05 '15 at 22:01
I 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/](https://jsfiddle.net/y18074c0/5/) – Dennis Helfensteller May 07 '15 at 07:16

score 2 · Answer 3 · answered Feb 16 '19 at 19:54

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.

score 0 · Answer 4 · answered Nov 17 '17 at 14:47

I had same issue. I only resolved adding a autoWidth:true, and it works now!

My owl script is:

 $('.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
    }
  }
})

Owl Carousel 2 - autoHeight (multiple items)

4 Answers4

Linked