如何循环遍历对象列表并在 NodeJs 和 ejs 模板中使用滑动轮播显示它们

如何解决如何循环遍历对象列表并在 NodeJs 和 ejs 模板中使用滑动轮播显示它们

如何使旋转木马只有一列，所有程序的列表在一行中滑动。当遍历我的 programs 时，它会根据`程序的数量不断复制另一列中的 programs 对象，而不是让一列带有幻灯​​片。此外，我的导航图标消失了。当我只有静态数据时它有效。

我的 HTML

  <section class="event spad">
    <div class="container">
      <div class="row">
        <div class="col-lg-12">
          <div class="section-title">
           <h2>Upcoming Events</h2>
          </div>
         </div>
        </div>

     <div class="row"></div>
       <% programs.forEach(program=> { %>
         <div class="event__slider owl-carousel">
          <div class="col-lg-4">
            <div class="event__item">
             <div class="event__item__pic set-bg" data-setbg="/images/carousel-3.jpg">
             <div class="tag-date">
               <span>Dec 15,2019</span>
             </div>
            </div>
              <div class="event__item__text">
               <h4>David Guetta Miami Ultra</h4>
               <p><i class="fa fa-map-marker"></i> Funkhaus Berlin,Berlin,Germany</p>
             </div>
            </div>
           </div> 
         </div>
        <% });%>
      </div>
    </div>
   </section>

我的 JavaScript

  ("use strict");

    (function ($) {
     /*------------------
      Background Set
      --------------------*/
      $(".set-bg").each(function () {
        var bg = $(this).data("setbg");
        $(this).css("background-image","url(" + bg + ")");
     });

    /*--------------------------
      Event Slider
      ----------------------------*/
    $(".event__slider").owlCarousel({
      loop: true,margin: 0,items: 3,dots: false,nav: true,navText: [
        "<i class='fa fa-angle-left'></i>","<i class='fa fa-angle-right'></i>",],smartSpeed: 1200,autoHeight: false,autoplay: true,responsive: {
        992: {
            items: 3,},768: {
            items: 2,0: {
            items: 1,});
 })(jQuery);

还有我的 CSS

 .spad {
   padding-top: 100px;
   padding-bottom: 100px;
 }



  -----------------------*/

.event {
   padding-bottom: 60px;
}

.event .section-title {
  margin-bottom: 10px;
  position: relative;
}

.event .section-title:after {
  position: absolute;
  right: 46px;
  top: 25px;
  height: 2px;
  width: 775px;
  background: rgba(225,225,0.3);
  content: "";
  z-index: -1;
}

.event__slider .col-lg-4 {
  max-width: 100%;
}

.event__slider.owl-carousel .owl-stage-outer {
  padding-top: 30px;
  padding-bottom: 40px;
}

.event__slider.owl-carousel .owl-nav {
  position: absolute;
  right: 15px;
  top: -50px;
}

.event__slider.owl-carousel .owl-nav button {
  font-size: 22px;
  color: #111111;
  opacity: 0.5;
  margin-right: 10px;
}

.event__slider.owl-carousel .owl-nav button:last-child {
  margin-right: 0;
}

.event__item {
  -webkit-Box-shadow: 0px 3px 15px rgba(22,41,124,0.1);
  Box-shadow: 0px 3px 15px rgba(22,0.1);
}

.event__item__pic {
  height: 360px;
  position: relative;
}

.event__item__pic .tag-date {
  position: absolute;
  left: 0;
  bottom: -21px;
  width: 100%;
  text-align: center;
}

.event__item__pic .tag-date span {
  font-size: 15px;
  color: #ffffff;
  display: inline-block;
  background: #5c00ce;
  padding: 12px 8px 9px 20px;
}

.event__item__text {
  text-align: center;
  padding: 45px 10px 25px;
}

.event__item__text h4 {
  font-size: 26px;
  font-weight: 700;
  color: #111111;
  margin-bottom: 10px;
}

.event__item__text p {
  color: #888888;
  margin-bottom: 0;
}

.event__item__text p i {
  color: #5c00ce;
  margin-right: 8px;
  font-size: 17px;
}

我遇到这个问题是因为我正在遍历所有程序。 但是，如果我将这样的 HTML 添加为静态文件，它将完美运行。

<section class="event spad">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <div class="section-title">
                    <h2>Upcoming Events</h2>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="event__slider owl-carousel">
                <div class="col-lg-4">
                    <div class="event__item">
                        <div class="event__item__pic set-bg" data-setbg="img/events/event-1.jpg">
                            <div class="tag-date">
                                <span>Dec 15,2019</span>
                            </div>
                        </div>
                        <div class="event__item__text">
                            <h4>David Guetta Miami Ultra</h4>
                            <p><i class="fa fa-map-marker"></i> Funkhaus Berlin,Germany</p>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="event__item">
                        <div class="event__item__pic set-bg" data-setbg="img/events/event-2.jpg">
                            <div class="tag-date">
                                <span>Dec 15,Germany</p>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="event__item">
                        <div class="event__item__pic set-bg" data-setbg="img/events/event-3.jpg">
                            <div class="tag-date">
                                <span>Dec 15,Germany</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>