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?