I'm trying to generate carousel with images from api json. URL where images are stored is: http://localhost/
First of all I want to check the amount of images occurring in JSON and then display them in carousel. Here's the example of bootstrap carousel code I want to use:
<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>
Any help will be appreciated!
I just added an image element inside the carousel with the help of javascript. Now you have to work only for an active carousal.
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>