0
我使用JSON/AJAX显示猫头鹰传送带2的动态内容时出现问题。我在控制台中没有收到错误消息,但无法让旋转木马工作。我只看到一个空白页。我能够追加从JSON文件获取的图像url与jquery.append,但他们不会显示在旋转木马的方式。显示设置为“阻止”。任何提示我错过了什么?猫头鹰传送带2动态内容JSON
的index.html -
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rengastie</title>
<link rel="stylesheet" href="css/app.css">
<link rel="stylesheet" href="css/owl.carousel.min.css">
<link rel="stylesheet" href="css/owl.theme.default.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="row">
<div class="small-12 columns">
<div id="top-carousel" class="owl-carousel owl-theme">
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>
app.js -
$(document).ready(function() {
$('.owl-carousel').owlCarousel();
});
var $owl = $('.owl-carousel');
$owl.owlCarousel({
loop:true,
items: 1,
autoplay:true,
autoplayTimeout:3000,
autoplayHoverPause:false
});
$.ajax({
url: 'json/data.json',
dataType: 'json',
success: function(data) {
var content = '';
var alt = "pic123";
for (i in data.owl) {
content += "<div class='item'><img src=\"" +data.owl[i].img+ "\" alt=\"" +alt+ "\"></div>";
}
$owl.trigger('insertContent.owl',content);
//$owl.append(content); This stacks the images above eachother, not affected by the carousel settings
}
});
data.json -
{
"owl" : [
{
"img": "img/kuvaIso1.jpg"
},
{
"img": "img/kuvaIso2.jpg"
},
{
"img": "img/kuvaIso3.jpg"
},
{
"img": "img/kuvaIso4.jpg"
},
{
"img": "img/kuvaIso5.jpg"
}
]
}