Assembling the carousel from the bootstrap carousel after the Ajax call has been completed. Elements and classes are being appended post page load as shown below.
async function ajaxCall() {
let data = await fetch('ApiLink');
let jsonData = await data.json();
let carousel = document.createElement('section');
let inner = document.createElement('div');
carousel.id = 'slider';
carousel.className = 'carousel carousel-dark slide';
carousel.setAttribute('data-bs-ride', 'carousel');
inner.className = 'carousel-inner';
jsonData.data.forEach(data => {
let item = document.createElement('div');
let avatar = document.createElement('img');
item.className = 'carousel-item';
avatar.src = data.avatar;
item.appendChild(avatar);
inner.appendChild(item);
});
inner.querySelector('.carousel-item').classList.add('active');
carousel.appendChild(inner);
document.body.appendChild(carousel);
}
Despite these efforts, the carousel fails to function properly.
It appears that reinitializing the carousel after the creation and appending of HTML elements may be necessary. Hence, the question arises:
How can the bootstrap carousel be reinitialized following the Ajax call without utilizing jQuery?