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?

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.