Сова карусель 2 не работает после вызова API

Question

Я беру некоторые данные из API YouTube, но когда я использую следующий код. Сова карусель не работает.

var url = "https://www.googleapis.com/youtube/v3/videos?part=statistics,contentDetails&id=" + get_video_id + "&key=" + api_key + "";
$.get(url, function(value) {

    if (value.items[0] != undefined) {
        var video_viewers = value.items[0].statistics.viewCount;
        single_carousel_container.append('<div class="single-video"><h3 class="video-view">' + video_viewers + '</h3>/div>');

    }
});
owl_active();

function owl_active() {
    single_carousel_container.owlCarousel({
            loop: true,
            margin: 30,
        }
    });
}

Но если я удаляю вызов API, тогда сова работает правильно. Итак, как я могу использовать Сову Карусель 2 с вызовом YouTube API?

Полный исходный код: https://pastebin.com/bKeLYbZv

Answer 1

После изменения HTML-кода ползунка (с помощью prepend, append и т. Д.) Необходимо сообщить OwlCarousel, что HTML-код был изменен, вызывая событие refresh.owl.carousel в элементе карусели.

Непутайте с событием refreshed.owl.carousel, которое автоматически запускается после обновления ползунка.

Документы: https://owlcarousel2.github.io/OwlCarousel2/docs/api-events.html#refresh-owl-carousel

Answer 2

Вы инициализируете карусель совы, прежде чем выборка данных будет завершена и прикреплена к контейнеру.

var url = "https://www.googleapis.com/youtube/v3/videos?part=statistics,contentDetails&id=" + get_video_id + "&key=" + api_key + "";

function owl_active() {
    single_carousel_container.owlCarousel({
            loop: true,
            margin: 30,
        }
    });
}

$.get(url, function(value) {

    if (value.items[0] != undefined) {
        var video_viewers = value.items[0].statistics.viewCount;
        single_carousel_container.append('<div class="single-video"><h3 class="video-view">' + video_viewers + '</h3>/div>');
        owl_active();
    }
});