Slick carousel has 0px width when loaded in collapsed tab

Question

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 slides on top of eachother. When pressing arrow to see next slide, the slides go back to normal. If I select the slider and want to check the components in my browser, it also goes back to normal.

Please see this example: http://plnkr.co/edit/iw9f2alEnK0HFkv1eq16?p=preview

This is the slick configuration I'm using:

$(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,
              }
            }]
    });
});

Would anyone have an idea of how to solve this?

Methyl

Answer 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.

Methyl

How would you do this if you have other setting in your slick function? – Bolshevist

i get this error:Uncaught TypeError: Cannot read property 'setPosition' of undefined at jQuery.fn.init.i.fn.slick (slick.min.js:4) at HTMLDocument.eval (hotelPage.js:72) at mightThrow (jquery.js:3534) at process (jquery.js:3602) – Billon

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

Clifton