If content is hidden during Slick bootstrap, Slick refuses to play ball

I’m not sure that this is easily fixable but I’m implementing Slick on a Bootstrap website and I have a Slick-based gallery in a set of Bootstrap tabs. If the gallery tab is the active one on page load, the Slick carousel works fine, but if the gallery tab is not the one that’s active on page load the Slick carousel seems to break (the tab basically looks empty).

At a guess this is due to the items being hidden as Slick is set up against the items and so Slick can’t calculate the dimensions of the slides, etc.

A possible non-Slick-based fix is to hook into BS tab event system and only call $.fx.slick() when the tab is first switched to. Of course this only works for JavaScript components that allow a developer to hook into this kind of event system, so maybe there’s a way for Slick to get round this limitation without requiring developers to do these hackish bits of code (which they sometimes may not be able to do).

[patrickvaillancourt]

The .resize() option didn’t work for me. I experienced a similar problem attempting to render an embedded google map inside a bootstrap tab as well. To my surprise both problems were resolved by changing how bootstrap handles hidden tabs:

/* bootstrap hack: fix content width inside hidden tabs */
.tab-content > .tab-pane, .pill-content > .pill-pane {
    display: block;    /* undo display:none          */
    height: 0;         /* height:0 is also invisible */ 
    overflow: hidden;  /* no-overflow                */
}
.tab-content > .active, .pill-content > .active {
    height: auto;      /* let the content decide it  */
} /* bootstrap hack end */

more here: https://groups.google.com/forum/#!topic/twitter-bootstrap-stackoverflow/0Aqzs5s_hEY

[painreign]

Took ages to figure out:

$('.slick-slider').each(function() {
    $(this).slick("getSlick").refresh();
});