Remove inline height once we view next carousel item

[computerbarry]

Hi all

I’m using owl carousel 2 beta, working good so far, the main issue right now is that the main wrapper is always showing at the maximum height, regardless of each item’s content. I know owl’s auto height is available, though some issues when using multiple carousels on the same page, so hoping to fix this with a bit of JS.

I currently set the parent’s height with:

$('.cases').click(function () {
    $("#cases .owl-stage:first-child .owl-item.active").parents('.owl-stage-outer').css("height", "300px");

Which outputs:

<div class="owl-stage-outer" style="height: 300px; ">

I need a way to unset/remove the height once the second item is viewed, or any item for that matter, it’s only the first item I need to add the height. But when I view the second item… the height is still 300px and cutting of the content.

Can anybody help?
How, what is the correct approach for removing the height, and this is only for mobile, so another click event is not really suited.

<div class="owl-stage-outer">
<div class="owl-item active">
<div class="owl-item">
<div class="owl-item">
<div class="owl-item">
<div class="owl-item">

So the below would remove the height, likewise if the third, fourth or fifth item was active.

<div class="owl-stage-outer">
    <div class="owl-item">
    <div class="owl-item active">
    <div class="owl-item">
    <div class="owl-item">
    <div class="owl-item">

Producing below without the style:

<div class="owl-stage-outer">

Thanks, Barry