Slider Not Rendering Properly in Page

Question

I have done a project in express js, html, css etc..I have one slider in one page, I am using bootstrap Carousel, with static data it will work properly but with dynamic data (from database) it will not render properly. The div forms separately and display one by one not as a slider. I don,t know how to fix it?

<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>