在折叠选项卡中加载时，Slick carousel 的宽度为 0px

Question

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

请看这个例子： 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

最终我得到了巧妙的创作者 Ken Wheeler 本人的答案。当可折叠内容被触发打开时，只需调用以下行：

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

...并将 "slider-class" 替换为滑块的 class 名称。我个人用这一行创建了一个 angular 函数，并用 ng-open 触发它。

Answer 2

与 slick carousel 无法从具有 {display: none} 或小宽度如 {width: 1px} 的块获得正确宽度的原因有关的问题。

这种情况经常发生在内容使用样式隐藏时，如下例所示：

.product.data.items>.item.content~.content {
    border: 0;
    clip: rect(0,0,0,0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

想法是使用 {overflow-y: hidden} 和 {height: 0} 代替 {display: none} 来隐藏内容。并且tab激活后，内容需要设置{height: auto;}。

//  fix for slick carousel that initializes with zero width in collapsed tab
//  it happens in tab with {display: none;} + small width like {width: 1px;}
.tab-content-selector {
    width: 100%;
    display: block !important; // if it set to display: none by script
    overflow-y: hidden;
    height: 0;
    padding: 0 15px; // can be adjusted according to needs, but top and bottom padding must be zero
}

.tab-title-selector.active + .tab-content-selector {
    height: auto;
    padding: 10px 15px 30px; // can be adjusted according to needs
}

在折叠选项卡中加载时，Slick carousel 的宽度为 0px

Slick carousel has 0px width when loaded in collapsed tab

javascript

slick.js

angular-bootstrap