Slick Carousel Has 0px Width When Loaded In Collapsed Tab

When loading slick slider in collapsed content (angular-bootstrap collapse plugin in this case) the .slick-track div gets 0px width, resulting in the slider trying to fit all slide

Solution 1:

Finally I got the answer by slick creator Ken Wheeler himself. When collapsable content is triggered open, simply call the following line:

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

...and replace "slider-class" with the class name of your slider. Personally I created an angular function with this line, and triggered it with ng-open.

Solution 2:

Problem related to the reason that slick carousel cannot get correct width from block that has {display: none} or small width like {width: 1px}.

This situation is often occurring when content is hidden with styles like in example below:

.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;
}

The idea is to use {overflow-y: hidden} and {height: 0} for content hiding instead of {display: none}. And after tab activation, it is needed to set {height: auto;} for content.

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