javascript - 在折叠选项卡中加载时，光滑轮播的宽度为 0px

Question

当在折叠的内容中加载光滑的 slider 时(在这种情况下为 angular-bootstrap 折叠插件)，.slick-track div 的宽度为 0px，导致 slider 试图将所有幻灯片放在彼此的顶部。按箭头查看下一张幻灯片时，幻灯片恢复正常。如果我选择 slider 并想检查浏览器中的组件，它也会恢复正常。

请看这个例子:
http://plnkr.co/edit/iw9f2alEnK0HFkv1eq16?p=preview

这是我正在使用的巧妙配置:

$(document).ready(function(){
    $('.tourImageSlider').slick({
          dots: true,
          infinite: false,
          slidesToShow: 3,
          slidesToScroll: 1,
          responsive: [
            {
              breakpoint: 1500,
              settings: {
                slidesToShow: 2,
                slidesToScroll: 1,
              }
            },
            {
              breakpoint: 1000,
              settings: {
                slidesToShow: 1,
                slidesToScroll: 1,
              }
            }]
    });
});

有人知道如何解决这个问题吗？

Answer 1

最后我得到了光滑的创造者肯·惠勒本人的答案。当可折叠内容被触发打开时，只需调用以下行:

$('.slider-class').slick('setPosition');

...并将“slider-class”替换为 slider 的类名。
我个人用这条线创建了一个 Angular 函数，并用 ng-open 触发它。