Slick: putting slick in foundation tabs causing an init issue

[jeremymandel]

Trying to put two different instances of slick into foundation tabs. Seems that there is some sort of init issue when slick is not being displayed as the second instance loads all wonky until a slide action is taken. Have illustrated the issue in the fiddle below.

http://jsfiddle.net/nvfsbt1h/15/

Any help would be much appreciated!

[simeydotme]

It's because javascript cannot properly calculate dimensions of hidden objects. To combat this, reset the dimensions on tab load:

$(".tabs").on("toggled", function (event, tab) {
    $(".slider").slick("setPosition");
});

http://jsfiddle.net/nvfsbt1h/16/

[telmaco]

Thank you simeydotme, it works!!

[montalvomiguelo]

In Foundation 6 listen to the tabs event change.zf.tabs (_Fires when the plugin has successfully changed tabs._)

$(".tabs").on("change.zf.tabs", function () {
    $(".slider").slick("setPosition");
});