Question

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

我知道不应该这样，但是，例如，该块为空，我添加了数据，但它仍然为空。不过，它的高度仅为1px。

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

Answer 1

在更新<div class='owl-item'>之后，您需要将方法调用到refresh猫头鹰轮播中，以便它可以更新其高度。 Here一个例子。

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

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

Answer 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>

Answer 3

尝试一下：

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');

OwlCarousel自动更新高度

4 个答案: