OwlCarousel autoheight на обновлении данных

Я OwlCarousel, имеющего значение true. Когда я обновляю данные внутри <div class = 'owl-item'> блок, высота автоматически не изменяется.

Я понимаю, что этого не должно быть, но, например, блок был пуст, я добавил данные и он остался пустым. Хотя, это просто высота 1px.

возможно ли изменить высоту при изменении данных внутри?

8
javascript owl-carousel owl-carousel-2

4 ответов

право после того как вы обновили свой <div class='owl-item'> нужно вызвать метод refresh ваша сова-карусель, чтобы она могла обновить свою высоту. здесь пример.

но в основном вы можете назвать это так:

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

попробуй такое

$(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>
4
var $owl = $('.owl-carousel').owlCarousel({
    items: 1,
    autoHeight: true
});
$('.owl-item').html('That was a hoot.')
$owl.trigger('refresh.owl.carousel');
3

попробуйте это:

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