Question

我尝试使用包含带有Angular资源的API支持的多个图像制作Bootstrap carousel。

但是当我带上API时，它看起来像这样：

这是HTML：

<div ng-controller="ruta_hbo_max" class="carousel slide" data-ride="carousel" data-type="multi" data-interval="1000" id="hbo_mas">
    <div class="carousel-inner">
        <div class="item " ng-class="{active:!$index}" ng-repeat="data in datos">
            <div class="col-md-3"><a><img src="{{ data.ruta }}{{ data.nombre }}.jpg"></a></div>
        </div>
    </div>
</div>

使用Javascript：

$(document).ready(function() {
   $('.carousel[data-type="multi"] .item').each(function(){
    var next = $(this).next();
      if (!next.length) 
      {
          next = $(this).siblings(':first');
      }
      next.children(':first-child').clone().appendTo($(this));

      for (var i=0;i<2;i++) 
      {
          next=next.next();
          if (!next.length) 
          {
              next = $(this).siblings(':first');
          }
          next.children(':first-child').clone().appendTo($(this));
      }
   });
});

我已经没有想法要解决了，希望有人能帮助我，谢谢

Answer 1

嗨我可以解决，让我的jquery脚本跟随。但现在我的问题是它适用于Firefox和资源管理器。但铬仍然可以逐一向我展示？谢谢你的关注。

$(document).ready(function() {
        $('.item').each(function(){
            var next = $(this).next();
            if (!next.length)
            {
                next = $(this).siblings(':first');
            }
            next.children(':first-child').clone().appendTo($(this));

            for (var i=0;i<2;i++) 
            {
                next=next.next();
            if (!next.length) 
            {
              next = $(this).siblings(':first');
            }

            next.children(':first-child').clone().appendTo($(this));
        }
    });
});

Bootstrap轮播角度多个图像

1 个答案: