From API I’m getting array of images and when requesting the API second time I’m getting another array of different images. When press the button I want to add an images array to the bootstrap gallery and when press again I want to add second array into another gallery. I don’t understand how reuse the same bootstrap html template and create different image galleries in the same html page. API object:
{
"title": "rodeo",
"author": "consectetur",
"images": [
"http://example/photo.jpg",
"http://example/photostwo.jpg",
"http://example/photosone.jpg"
],
"year": "1998"
}
<div>
<div id="container"></div>
<button id="dataBtn"></button>
</div>
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="...">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
function test(){
const carouselItem = document.querySelector('.carousel-item');
function create(element) {
return document.createElement(element);
}
function append(parent, el) {
return parent.appendChild(el);
}
for (image of data.images) {
let img = create('img');
img.classList.add(‘d - block’, ‘w - 100’);
img.src = image;
append(carouselItem, img);
}
}
test();
document.getElementById("dataBtn").addEventListener("click", test);