Question

嗨我似乎偶然发现了我的代码，我有一个来自php文件的ajax请求，它获取了从api获取的'thumbnail_url。我的问题出在我的js和carousel上。我想要实现的是我想将拉出的图像从ajax附加到owl carousel。

<title>Ajax Preview</title>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://syncslider-ehnoxx07.c9users.io/Working_imgs_ajax/main.js"></script>
<link rel="stylesheet" href="https://syncslider-ehnoxx07.c9users.io/With_slick/owl-carousel.css" type="text/css" />
<link rel="stylesheet" href="https://syncslider-ehnoxx07.c9users.io/With_slick/owl-theme.css" type="text/css" />
<script type="text/javascript" src="https://syncslider-ehnoxx07.c9users.io/With_slick/owl-carousel.js"></script>
<script type="text/javascript" src="https://syncslider-ehnoxx07.c9users.io/With_slick/owl-min.js"></script>
<script type="text/javascript" src="https://syncslider-ehnoxx07.c9users.io/With_slick/carousel.js"></script>

  <style>
  #owl-demo .item{
  background: #a1def8;
  padding: 30px 0px;
  display: block;
  margin: 5px;
  color: #FFF;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  text-align: center;
}
.prevImg{
    visibility:visible !important;
    display:block !important; 
}
</style>
</head>

<body>
<div id="owl-example" class="owl-carousel">
</div>
</body>
</html>

我的ajax

 $(function() {
        var $data = $('#owl-example');
        $.ajax({
         type:'GET',
         dataType:'json',
         url:'https://syncslider-ehnoxx07.c9users.io/Working_imgs_ajax/preview-template.php',
         success: function (data) {
          //pull data object to get thumbnail_urls.
          for(var i=0 ; i<data.length ; i++){
            console.log(data);
          $data.append('<div class="item"><img class="prevImg" src=' + data[i].thumbnail_url + '></div>');
         }
         }
     });
    });

Answer 1

您需要使用新项重新启动owlCarousel容器。确保您在data[i].thumbnail_url中获得了正确的图片网址。用以下代码替换JS。

使用新项目重新初始化轮播的实际代码

var owl = $(".owl-carousel").data('owlCarousel');
$data.append(html);
owl.reinit(OWL_OPTIONS);

工作演示JS fiddle here，在2秒的间隔后，旋转木马中有2个默认项目，其他2个项目将被添加到上一个旋转木马。

如果您想用新的旋转木马替换整个旋转木马项目，请更换 $data.append(html); $data.html(html); $(document).ready(function () { var $data = $("#owl-example"), OWL_OPTIONS = { autoPlay: 3000, //Set AutoPlay to 3 seconds dots: true, items: 2, itemsDesktop: [1199, 3], itemsDesktopSmall: [979, 3] }; $data.owlCarousel(OWL_OPTIONS); $.ajax({ type: 'GET', dataType: 'json', url: 'https://syncslider-ehnoxx07.c9users.io/Working_imgs_ajax/preview-template.php', success: function (data) { //pull data object to get thumbnail_urls. var html = ''; for (var i = 0; i < data.length; i++) { html += '<div class="item"><img class="prevImg" src=' + data[i].thumbnail_url + '></div>'; } setTimeout(function () { var owl = $(".owl-carousel").data('owlCarousel'); $data.append(html); owl.reinit(OWL_OPTIONS); }, 2000); } }); }); 替换为新的item fiddle here

<强> JS：

First EditText

Answer 2

cpp

希望这有帮助。

来自ajax请求的图像不会显示在轮播上

2 个答案: