I am currently extracting data from The Movie Database and I aim to showcase the retrieved information on my webpage using a carousel card with 3 slides. Here is a summary of my progress so far, html,
<div class="details"><!--Movie details are supposed to be presented here--></div>
Javascript,
<script type="text/javascript">
function displayData(resultFromServer) {
let gridHtml=" ";
let poster= "https://image.tmdb.org/t/p/w185/";
let element= document.querySelector(".details");
let index= [].indexOf.call(element.parentElement.children, element);
let selected = resultFromServer.results[index];
for (let i = 0; i < resultFromServer.results.length; i++) {
const movieResults =resultFromServer.results[i];
gridHtml += `
<div id="multi-item-example" class="carousel slide carousel-multi-item" data-ride="carousel">
<!--Indicators-->
<ol class="carousel-indicators">
<li data-target="#multi-item-example" data-slide-to="0" class="active"></li>
<li data-target="#multi-item-example" data-slide-to="1"></li>
<li data-target="#multi-item-example" data-slide-to="2"></li>
</ol>
<!--/.Indicators-->
<!--Slides-->
<div class="carousel-inner" role="listbox">
<!--First slide-->
<div class="carousel-item active">
<div class="row">
<div class="col-md-4">
<div class="card mb-2">
<img class="card-img-top" src="${poster}${movieResults.poster_path}"
alt="Card image cap">
<div class="card-body">
<h4 class="card-title">${movieResults.title}</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the
card's content.</p>
<a class="btn btn-primary">Button</a>
</div>
</div>
</div>
</div>
</div>
</div>`;
}
let myPage= document.querySelector(".details");
myPage.innerHTML=gridHtml;
}
</script>
I am facing an issue where the movie details are being displayed vertically. Any assistance would be greatly appreciated!