Javascript Owl转盘在使用jquery构建后不显示
使用AJAX调用，我将最新的视频发布到vimeo帐户。然后，我使用jQuery循环浏览数据并构建一组div，这些div将用作最新视频的传送带。我正在使用猫头鹰转盘，并在过去成功地使用过它 我知道AJAX调用正在返回我需要的JSON数据。我知道我的jQuery代码正在DOM中构建旋转木马组件。我的问题是，当我调用转盘时，它在浏览器窗口中显示为空白。使用开发工具，我可以看到div在那里，它们有所有必要的标记，应该允许owlcarousel做它的事情。我错过了什么？使用javascript为转盘构建html元素是否有问题 以下是我尝试构建的一个简单版本：Javascript Owl转盘在使用jquery构建后不显示,javascript,jquery,html,css,owl-carousel,Javascript,Jquery,Html,Css,Owl Carousel,使用AJAX调用，我将最新的视频发布到vimeo帐户。然后，我使用jQuery循环浏览数据并构建一组div，这些div将用作最新视频的传送带。我正在使用猫头鹰转盘，并在过去成功地使用过它 我知道AJAX调用正在返回我需要的JSON数据。我知道我的jQuery代码正在DOM中构建旋转木马组件。我的问题是，当我调用转盘时，它在浏览器窗口中显示为空白。使用开发工具，我可以看到div在那里，它们有所有必要的标记，应该允许owlcarousel做它的事情。我错过了什么？使用javascript为转盘构建h
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="owl.carousel.min.js"></script>
<link rel="stylesheet" type="text/css" href="owl.carousel.css">
</head>
<body>
<div class="owl-carousel" id="vidCarousel">
</div>
<script type="text/javascript">
$.ajax({
url: "http://vimeo.com/api/v2/4462530/videos.json",
type: 'GET',
dataType: 'json',
success: function(data){
pppVideos = data;
for (var i = 0; i < 10; i++){
var vid = pppVideos[i].url
$('#vidCarousel').append('<div class="item-video" data-merge="1"><a class="owl-video" href="' + vid + '"></a></div>')
}
}
});
$('.owl-carousel').owlCarousel({
items:1,
merge:true,
loop:true,
margin:10,
video:true,
lazyLoad:true,
center:true,
responsive:{
480:{
items:2
},
600:{
items:4
}
}
})
</script>
</body>
</html>
$.ajax({
url:“http://vimeo.com/api/v2/4462530/videos.json",
键入：“GET”，
数据类型：“json”，
成功：功能（数据）{
pppVideos=数据；
对于（变量i=0；i<10；i++）{
var vid=pppVideos[i]。url
$（'#vidCarousel'）。附加（''）
}
}
});
$（'.owl carousel'）。owl carousel({
项目：1，
合并：对，
循环：对，
差额：10，
视频：没错，
懒汉：没错，
中：是的，
响应：{
480:{
项目：2
},
600:{
项目：4
}
}
})