删除活动课程后，引导轮播不起作用

Posted 2023-03-11

【中文标题】删除活动课程后，引导轮播不起作用

【英文标题】：Bootstrap carousel doesn't work after I remove the active class

【发布时间】：2020-06-22 16:00:42

【问题描述】：

我创建了一个页面，并从数据库中获取了一个路径数组

例如：

 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 复制了代码，但它不起作用，我还删除了那个活动类，也许这就是原因，但是我怎样才能在那个活动类之后以编程方式添加新的“轮播项目”？如果我做'图片[0]'，它不会在那个“FOR”中工作。

非常感谢！

【参考方案1】：

在同一问题中运行，使用节点 js、ejs 和 mysql。获取表示图像的单个路径数组以显示在 bs 轮播中。

因此你需要item-active 和item class 分别是两个image, src 类。为了区分 while 循环，请在“if - else”子句中运行 var，例如 i==0 -> 活动类，else -> 用于索引数组输入的其他项。

希望这是一个开始。

【参考方案2】：

为我工作：

<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 %>" >
    </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 %>" >
      </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>