滑块无法在页面中正确渲染

Question

我已经用express js，html，css等完成了一个项目。我在一个页面中有一个滑块，我正在使用Bootstrap Carousel，使用静态数据可以正常工作，但是使用动态数据（来自数据库）则不会正确渲染。 div单独形成，并且不作为滑块一一显示。我不知道该如何解决？

<div id="myCarousel" class="carousel slide" data-ride="carousel">

      <!-- Indicators -->
        <ol class="carousel-indicators">
          <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
          <li data-target="#myCarousel" data-slide-to="1"></li>
          <li data-target="#myCarousel" data-slide-to="2"></li>
        </ol>

        <!-- Wrapper for slides -->


        <div class="carousel-inner">
            <% for(var i=0; i< events.length;i++ ){%>

          <div class="item active">

              <!-- style="background-image:url(images/index7.jpg)" -->
              <% if(events[i].checkbox == 'true'){ %>
            <div class="banner-item bg-overlay" style="background-image:url(<%=imageurl+events[i].proimg%>)">
              <div class="container">
                <div class="banner-content text-center">
                  <div class="banner-content-wrap">
                    <div id="clockdiv">
                      <div class="countdown bg-style">
                        <div class="counter-day">
                          <span class="days"></span>
                          <div class="smalltext">Days</div>
                        </div>
                        <div class="counter-hour">
                          <span class="hours"></span>
                          <div class="smalltext">Hours</div>
                        </div>
                        <div class="counter-minute">
                          <span class="minutes"></span>
                          <div class="smalltext">Minutes</div>
                        </div>
                        <div class="counter-second">
                          <span class="seconds"></span>
                          <div class="smalltext">Seconds</div>
                        </div>
                      </div>
                    </div>

                    <h1 class="banner-title">
                        <%=events[i].eventName%>
                    </h1>

                    <p class="banner-btn text-center">
                        <a href="/signin" class="btn btn-primary">Login</a>
                      <a href="/events" class="btn btn-primary">Buy Tickets</a>
                      <a href="eventicawhitepaper.pdf" target="_blank" class="btn btn-primary">Whitepaper</a>
                    </p>
                  </div>

                </div>

              </div>

            </div>
            <%}%>

          </div>

          <%}%> 




        <!-- Left and right controls -->
        <a class="left carousel-control" href="#myCarousel" data-slide="prev">
          <span class="glyphicon glyphicon-chevron-left"></span>
          <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#myCarousel" data-slide="next">
          <span class="glyphicon glyphicon-chevron-right"></span>
          <span class="sr-only">Next</span>
        </a>
      </div>