OwlCarousel autoheight on data update

Question

I have OwlCarousel, which has an autoheight parameter set to true. When I update the data inside the <div class = 'owl-item'> block, the height does not automatically change.\

I understand that this should not be, but, as an example, the block was empty, I added the data and it remained empty. Although, it's just a height of 1px.

Is it possible to change height on data inside changed?

Answer 1

Right after you've updated your <div class='owl-item'> you need to call the method to refresh your owl-carousel so it can update its height. Here an example.

But basically you can call it this way:

$('.owl-carousel').trigger('refresh.owl.carousel');

Answer 2

Try this

$(document).ready(function() {
    const carousel = $(".owl-carousel")
    carousel.owlCarousel({
    items: 1,
    margin: 10,
    autoHeight: true
  });
   $(".item:first").html('update');
   carousel.trigger('refresh.owl.carousel');
});


$("#updateCarousel").on("click",function(e){
    $(".item:first").html('CONTENT<br><br>UPDATED');
    $(".owl-carousel").trigger('refresh.owl.carousel');
});

.owl-carousel .item {
  border: 2px solid red;
  background: red;
  width: 80%;
  margin:auto;
  color:white;

}
.owl-carousel{
  
    width:100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet"/>
<link href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.theme.default.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<div class="owl-carousel">
  <div class="item"> 1</div>
  <div class="item"> 2 </div>
  <div class="item"> 3 </div>
  <div class="item"> 4 </div>
  <div class="item"> 5 </div>
</div>
<button type="button" id="updateCarousel">Update Carousel</button>

Answer 3

Try this:

var currentItem = $('.owl-item.active');
var html = '<p class="item">Hello world et plus encore</p>';
currentItem.html(html);

Answer 4

var $owl = $('.owl-carousel').owlCarousel({
    items: 1,
    autoHeight: true
});
$('.owl-item').html('That was a hoot.')
$owl.trigger('refresh.owl.carousel');