我做了一个页面,并且从数据库中得到了一个路径数组
例如:
images/file_name.jpg
而且我想从引导程序中在轮播中显示这些图像
<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>
已从db正确获取数据。我正在使用EJS,NodeJS和Mongoose。您能告诉我该怎么办吗?我从Boostrap Page复制了代码,但是它不起作用,我还删除了该活动类,也许就是这个原因,但是如何在该活动类之后以编程方式添加新的“ Carousel Item”呢?如果我执行“ picture [0]”,它将无法在“ FOR”中运行。
非常感谢!
使用节点js,ejs和mysql在同一问题中运行。获取表示图像的各个路径数组以在bs轮播中显示。
因此您分别需要item-active和item类两个图像src类。为了在循环时进行区分,请在“ if-else”子句中运行类似i == 0的var->活动类,else->用于索引数组输入的其他项。
希望这是一个开始。
为我工作:
<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>