javascript - Angular Slick 旋转木马幻灯片堆叠在页面中

Question

我在我们的应用程序主页中使用 Angularjs 灵活的轮播控件。它可能有时会起作用，但大多数时候它会失败。我已经给出了一次显示 3 张幻灯片的选项，大约有 34 张幻灯片。现在，当我加载页面时，幻灯片会一张一张地堆叠起来。请看截图。

<slick responsive="breakpoints" dots ="false" infinite ="true" autoplay ="true" speed="500" slides-to-show= "4" slides-to-scroll="4" class="slickContainer">
     <ul class="slider responsive" ng-repeat="item in slides">
        <li>
            <a ng-click="gotoContentPage(item.ContentId, item.ChapterId)"><span>{{item.ContentId}}</span>{{item.ContentCaption}}</a>
        </li>
     </ul>
    </slick>

我也没有在控制台中收到任何错误。任何帮助将不胜感激。

Answer 1

我找到了这个问题的解决方案。我想在这里发布它，这可能会帮助将来遇到类似问题的人。 绑定(bind)数据后，我立即刷新解决了我的问题的 slider 。其代码片段如下。

$('.slickContainer').slick('refresh');