Is it possible to set up a carousel/slide show to a list of 150 items which are retrieved from an external source - carousel

Question

So I created a Pokedex (for my portfolio), anyhow I was wondering if it is possible to include a carousel within a modal that activates once it is clicked and the item data will be retrieved from an external API. Anyhow every time you call a new item it erased the modal body to fetch the new data.
//Function modal
let modalContainer = document.querySelector("#pokemon-modal");
function showModal(pokemon) {
let modalBody = $(".modal-body");
let modalTitle = $(".modal-title");
modalTitle.empty();
modalBody.empty();
// data-target ='#myCarousel'
//creating element for name
let nameElement = $("<h1>" + capitalizeFirstLetter(pokemon.name) + "</h1>");
//creating new img
let imageElementFront = $(
`<img alt="pokemon-image" src="${pokemon.imageUrl}" class="modal-img"
style="width:40%">`
);
//creating elemnt for height
let heightElement = $("<p>" + "Height: " + pokemon.height + "</p>");
//creating element for weight
let weightElement = $("<p>" + "Weight: " + pokemon.weight + "</p>");
//creating element for types
let pokemonTypes = [];
Object.keys(pokemon.types).forEach((key) => {
pokemonTypes.push(" " + pokemon.types[key].type.name);
});
let typesElement = $("<p>" + "Type(s): " + pokemonTypes + "</p>");
modalTitle.append(nameElement);
modalBody.append(imageElementFront);
modalBody.append(heightElement);
modalBody.append(weightElement);
modalBody.append(typesElement);
modalContainer.classList.add("is-visible");
$("#pokemonModal").modal("show");
}
This is just a portion of the code, but where I believe the problem exists to create such slideshow...
Any thoughts?