数据更新时的 OwlCarousel 自动高度答案

【问题标题】：OwlCarousel autoheight on data update数据更新时的 OwlCarousel 自动高度
【发布时间】：2026-01-02 06:20:05
【问题描述】：

我有OwlCarousel，它的autoheight 参数设置为true。当我更新<div class = 'owl-item'> 块内的数据时，高度不会自动改变。\

我知道这不应该，但是，例如，该块是空的，我添加了数据并且它仍然是空的。虽然，它只是1px的高度。

是否可以更改内部数据的高度？

【问题讨论】：

标签： javascript owl-carousel owl-carousel-2

【解决方案1】：

在您更新了<div class='owl-item'> 之后，您需要立即调用refresh owl-carousel 的方法，以便它可以更新它的高度。 Here 一个例子。

但基本上你可以这样称呼它：

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

【讨论】：

【解决方案2】：

试试这个

$(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>

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

试试这个：

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

【讨论】：