<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<% campground.images.forEach((img,i)=> { %>
<div class="carousel-item <%= i===0?'active':'' %>">
<img class="d-block w-100" src="<%=img.url%>" alt="Image <%= i %>">
</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"></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"></span>
</a>
</div>
I'm experiencing an issue with my code where only one image is being displayed in the carousel and it's not sliding to show the rest of the images. Can someone assist me in identifying the error here...
Upon console.logging(images), I confirmed that it is an array of objects containing 'img' as a property, each with its respective URL value. My goal is to get the carousel functioning correctly.