Estoy tratando de generar un carrusel con imágenes de api json . La URL donde se almacenan las imágenes es: http://localhost/
En primer lugar, quiero verificar la cantidad de imágenes que se producen en JSON y luego mostrarlas en carrusel. Aquí está el ejemplo del código de carrusel de arranque que quiero usar:
<div class="carousel" id="Carousel" data-ride="carousel"> <ol class="carousel-indicators"> <li class="active" data-slide-to="0" data-target="#Carousel"> <li data-slide-to="1" data-target="#Carousel"> </ol> <div class="carousel-inner" role="listbox"> <div class="carousel-item active"> <img class="img-fluid" src="" alt=""> </div> <div class="carousel-item"> <img class="img-fluid" src="" alt=""> </div> </div> </div>¡Cualquier ayuda será apreciada!
Acabo de agregar un elemento de imagen dentro del carrusel con la ayuda de javascript. Ahora tienes que trabajar solo para una juerga activa.
serverInfo = { "levelshotsArray": [ "https://picsum.photos/200", "https://picsum.photos/200/300?grayscale", "https://picsum.photos/200" ] } serverInfo.levelshotsArray.map(res => { var imge = document.createElement('img'); imge.src = res; imge.height = 100; imge.width = 100; imge.alt = "dfs"; document.getElementById('img').appendChild(imge); }); <div class="carousel" id="Carousel" data-ride="carousel"> <ol class="carousel-indicators"> <li class="active" data-slide-to="0" data-target="#Carousel"> <li data-slide-to="1" data-target="#Carousel"> </ol> <div class="carousel-inner" role="listbox"> <div id="img" class="carousel-item active"> </div> </div> </div>