Сова Карусель Высота пальца не определена

Question

Я использую плагин для Owl Carousel: https://github.com/gijsroge/OwlCarousel2-Thumbs

Вставляет изображения как навигационные пальцы.

Я пытался выяснить высоту всего .owl-thumbs Элемента. Что возможно в консоли. Но тот же код в моем scripts.js возвращает «ноль» для высоты.

Вот мой код:

jQuery( document ).ready(function($) {
console.log($('.owl-thumbs').outerHeight());
});

.. Я также пытался использовать другой селектор, например $('.owl-carousel.single owl-loaded .owl-thumbs') и т.д ..

Вот разметка карусели:

<div class="carousel single">
    <div class="owl-carousel single owl-loaded owl-drag" data-slider-id="1">

<div class="owl-stage-outer">
 <div class="owl-stage" style="transform: translate3d(-6985px, 0px, 
 0px); transition: all 0.25s ease 0s; width: 8255px;">
 <div class="owl-item video-item" style="width: 635px;"><a href="/wp- 
 content/uploads/2016/02/thumbexample-4.jpg" data-thumb="<img 
 src=&quot;/wp-content/uploads/2016/02/thumbexample-4.jpg&quot;/>" 
 class="single-slide" data-featherlight="image">
 <img src="/wp-content/uploads/2016/02/thumbexample-4.jpg"></a>
 </div>
</div>

<div class="owl-nav"><button type="button" role="presentation" 
 class="owl-prev"><span aria-label="Previous">‹</span></button><button 
 type="button" role="presentation" class="owl-next"><span aria- label="Next">›</span></button></div><div class="owl-dots"><button 
 role="button" class="owl-dot"><span></span></button>
</div>

<div class="owl-thumbs"><button class="owl-thumb-item"><img src="/wp- content/uploads/2016/02/thumbexample-4.jpg"></button>
</div>

</div>
</div>
</div>

Answer 1

Я только что нашел решение:

if($.fn.owlCarousel.Constructor.Plugins.Thumbs) {
    thumsHeight = $('.owl-thumbs').outerHeight();
}

... работает:)

Answer 2

Получить значение после инициализации плагина

var owl = $('.owl-carousel');
owl.owlCarousel();
// Listen to owl events:
owl.on('initialized.owl.carousel', function(event) {
    $('.owl-thumbs').outerHeight();
})