数据更新时的 OwlCarousel 自动高度

Question

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

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

的高度

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

Answer 1

试试这个：

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

Answer 2

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

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

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

Answer 3

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

Answer 4

试试这个

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

数据更新时的 OwlCarousel 自动高度

OwlCarousel autoheight on data update

javascript

owl-carousel

owl-carousel-2