光滑的轮播不会间歇性地初始化

Question

我的Slick旋转木马有点粗糙。我在网站上提供了一些文章，这些文章通过API显示，该API在其自己的幻灯片中显示每篇文章。我使用Bootstrap和JSTL标签的组合来填充幻灯片。

我遇到的这个问题似乎是间歇性的，有时它会起作用，有时它并不会让我对将它部署到生产中犹豫不决。以下是它不起作用时所做的事情：

这就是它应该做的事情（偶尔会这样做）：

我不太确定这里的问题似乎是什么，但我猜测它与初始化轮播后加载的内容有关，这会引起间歇性问题。

以下是我使用的代码（请注意，我已从此删除了许多变量和不必要的代码，因此JSTL标记可能没有意义）：

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

和Javascript：

(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);

非常感谢任何帮助。