Javascript 滑溜转盘不间断初始化

我的旋转木马有点麻烦。我有一个网站上的文章提要，它通过一个API拉入，API在自己的幻灯片中显示每篇文章。我使用Bootstrap和JSTL标记组合填充幻灯片

我遇到的问题似乎是间歇性的，有时有效，有时无效，这让我犹豫是否将其部署到生产中。以下是它在不工作时所做的：

下面是它应该做的（有时也会做）：

我不太确定这里的问题是什么，但我猜这与转盘初始化后加载的内容有关，这导致了它的间歇性问题

下面是我正在使用的代码（请注意，我已经从中删除了一些变量和不必要的代码，因此JSTL标记可能没有意义）：

---

如蒙协助，将不胜感激

当控制台出现故障时，您在控制台中是否有任何错误？@Red2678没什么遗憾的。@Red2678尽管我可以说，如果我将幻灯片中填充的数据量增加到10，而不是5，它会更频繁地出现故障。这让我相信这是某种加载问题。@BalusC这个问题在使用JSP时是间歇性的，它似乎并不总是发生。我不确定我是否理解您希望我演示的内容。如果我不使用JSP/JSTL，则不会出现此问题。我不知道是不是因为它在拉动态内容，但我不能用普通HTML重现这个问题。当它失败时，控制台中是否有任何错误？@Red2678没什么可悲的。@Red2678虽然我可以说，如果我将幻灯片中填充的数据量从5增加到10，它失败的频率会更高。这让我相信这是某种加载问题。@BalusC这个问题在使用JSP时是间歇性的，它似乎并不总是发生。我不确定我是否理解您希望我演示的内容。如果我不使用JSP/JSTL，则不会出现此问题。我不知道这是不是因为它在拉动态内容，但我不能用普通HTML重现这个问题。

<div class="carousel-article ">

        <c:forEach var="element" items="${listContent.items}" begin="${beginIndex}" end="${endIndex}" varStatus="status">

                <article>
                    <header>
                            <div class="col-sm-12">
                                <c:if test="${not empty promoImage}">
                                    <a href="${element.canonical_url}">
                                      <img data-lazy="${formatUrl}"
                                      alt="${promoImage.caption}" />
                                    </a>
                                </c:if>
                            </div>
                            <div class="col-sm-12">
                                <figure>
                                    <a href="${element.canonical_url}">
                                         <h4>${element.headline}</h4>
                                    </a>
                                  </div>
                                </c:if>
                            </figure>
                        </div>
                </header>
            </article>
    </c:forEach>
</div>

(function($, window) {
  $('.carousel-article').slick({
    arrows: true,
    lazyLoad: 'ondemand',
    infinite: true,
    speed: 300,
    slidesToShow: 3,
    adaptiveHeight: true,
    responsive: [
      {
        breakpoint: 768,
        settings: {
          slidesToShow: 2
        }
      },
      {
        breakpoint: 480,
        settings: {
          slidesToShow: 2
        }
      }
    ]
  });
  })(jQuery, window);