Question

使用AJAX通话我将最新视频发布到vimeo帐户。然后使用jQuery我循环遍历数据并构建一组div，它们将作为最新视频的轮播。我正在使用Owl Carousel，并且过去曾成功使用它。

我知道AJAX调用正在返回我需要的JSON数据。我知道我的jQuery代码正在构建DOM中的轮播组件。我的问题是当我调用旋转木马时，它在浏览器窗口中显示为空白。使用开发人员工具，我可以看到div在那里，他们有所有必要的标记，应该允许Owl Carousel做它的事情。我错过了什么？使用javascript为轮播构建html元素是一个问题吗？

以下是我尝试构建的简单版本：

<!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>

使用jquery构建后，Owl Carousel无法显示

0 个答案: