Estoy tratando de crear un carousel de Bootstrap
que carga múltiples imágenes mediante una api rest
. Cuando lo pruebo estáticamente me da el resultado de la imagen:
pero cuando mando a llamar los datos desde Angular
para consumir la api
sale así:
este es el código del carousel:
<div 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>
y el script
:
$(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));
}
});
});
No sé dónde pueda estar el error. Gracias.