api调用后猫头鹰轮播2无法正常运行

Question

我正在从youtube API中获取一些数据，但是当我使用以下代码时。猫头鹰传送带无法正常工作。

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调用，则猫头鹰轮播工作正常。那么如何将owl carousel 2与youtube api调用一起使用？

完整源代码：https://pastebin.com/bKeLYbZv

Answer 1

在数据获取完成并将其附加到容器之前，您正在初始化猫头鹰传送带。

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();
    }
});

Answer 2

修改滑块的HTML（通过前置，追加等）后，您需要让OwlCarousel知道HTML已被修改，从而触发了carousel元素上的refresh.owl.carousel事件。

不要与refreshed.owl.carousel事件混淆，该事件会在更新滑块后自动触发。

文档：https://owlcarousel2.github.io/OwlCarousel2/docs/api-events.html#refresh-owl-carousel