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

我得到了解决这个问题的方法。 我想把它贴在这里，这可能会对将来有类似问题的人有所帮助。 绑定数据后，我立即刷新了解决我问题的滑块。 代码片段如下。

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