Owl Carousel Auto Height Recalculation

Question

Im trying to create a form wizard using owl carousel. I have some conditional javascript running to see what form elements get certain inputs.

For example, I have a number of select boxes that have yes or no answers and depending on which one you pick, it will show or hide other select boxes. Here is an example of what I am trying to do.

http://jsfiddle.net/eju2uw20/1/

Here is the code I am using for the Owl Carousel.

$('.consultationSlider').owlCarousel({

    singleItem:true,
    mouseDrag: true,
    touchDrag: false,
    navigation : false,
    pagination : false,
    autoHeight: true,
    slideSpeed: 800

});

If you click on the next button, you will see the autoheight working. However, when you click on the "please choose" select box and click "no", you will see another select box appear.

How can I make it so that owl carousel recalculates the height to make up for the added elements?

Answer 1

The other answer updates the code every few seconds using an interval which will increase the load and is not a clean solution. This solution is much cleaner no need for extra code and only uses the function when needed...

setInterval(function () {
  $(".owl-carousel").each(function () {
    $(this).data('owlCarousel').autoHeight();
  });
});