Bootstrap carousel doesn't work after I remove the active class - node.js

Question

I made a page and I get from database an array of paths
eg:
images/file_name.jpg
and I want to display those images in a carousel from bootstrap
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel" >
<div class="carousel-inner">
<% for(let picture of modelpics) { %>
<div class="carousel-item">
<img class="d-block w-100" src="/<%= picture %>" >
</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>
</div>
Data are fetched correctly from db. I'm working with EJS, NodeJS and Mongoose. Can you please tell me what should I do for this to work? I copied the code from Boostrap Page , but it's not working, I also deleted that active class, maybe that's why, but how can I programatically add new "Carousel Item " after that active class? If I do ' picture[0] ' it wont work in that " FOR ".
Thank you very much!

Answer 1

running in same issue, using node js, ejs and mysql. Getting individual arrays of paths representing images to show in a bs carousel.
Therefore you need the item-active and item class respectively two image, src classes. To differentiate while looping put in an "if - else" clause running a var like i==0 -> active class, else -> other items for indexing array inputs.
Hope this is a start.

Answer 2

works for me:
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<% for (var pfad of players){%>
<% if (i==0) {%>
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<%} else {%>
<li data-target="#carouselExampleIndicators" data-slide-to="<% i %>"></li>
<!--<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>-->
<% } %>
<% i = i+1; %>
<% } %>
</ol>
<!--<ol class="carousel-indicators">-->
<div class="carousel-inner">
<% var i = 0; %>
<% for(var pfad of players){%>
<% if (i==0) {%>
<!--<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>-->
<div class="carousel-item active">
<img class="d-block w-100" src="<%= '/assets/img/' + pfad.image_gallery %>" alt="First slide">
</div>
<%} else {%>
<!--<li data-target="#carouselExampleIndicators" data-slide-to="<% i %>"></li>-->
<div class="carousel-item">
<img class="d-block w-100" src="<%= '/assets/img/' + pfad.image_gallery %>" alt="Second slide">
</div>
<% } %>
<% i = i+1; %>
<% } %>
</div>
<!--</ol>-->
<a class="carousel-control-prev" href="#carouselExampleIndicators" 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="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>