Menu icon Foundation
Multiple slick-sliders in Foundation Tabs

Hi,

I am trying to put multiple slick sliders into foundation tabs (one slider within each tab). The first tab works fine, but subsequent tabs break slick. I guess because de-activated tabs have display: none preventing slick from calculating widths and heights etc.

Any ideas on a resolution would be greatly appreciated

thanks

Simon

Slick Sliderfoundation tabs

Hi,

I am trying to put multiple slick sliders into foundation tabs (one slider within each tab). The first tab works fine, but subsequent tabs break slick. I guess because de-activated tabs have display: none preventing slick from calculating widths and heights etc.

Any ideas on a resolution would be greatly appreciated

thanks

Simon


adil gave the most helpful answer for this post
adil almost 5 years ago

Ok I solve the issue.

may be it can help you if you haven't solve it yet.

Here is the solution.
If I have tab1 active, and I want to click on tab2.
I was calling the tab1.unslick() and tab2.slick() well before the tab two contents are loaded, that's why it was not getting proper slick function

Code;

$('.tab2').on('shown.bs.tab', function (e) {
$('.tab1').unslick();
$('.tab2').slick();
});

the above function will execute once the tab2 contents are show. "shown.bs.tab" is event for tabs in Bootstrap. I have no Idea what event handler etc will u use in Foundation, but just to give u some idea (if the problem is not solved yet).

:)

This post has been closed. No new replies can be added.

adil almost 5 years ago

Ok I solve the issue.

may be it can help you if you haven't solve it yet.

Here is the solution.
If I have tab1 active, and I want to click on tab2.
I was calling the tab1.unslick() and tab2.slick() well before the tab two contents are loaded, that's why it was not getting proper slick function

Code;

$('.tab2').on('shown.bs.tab', function (e) {
$('.tab1').unslick();
$('.tab2').slick();
});

the above function will execute once the tab2 contents are show. "shown.bs.tab" is event for tabs in Bootstrap. I have no Idea what event handler etc will u use in Foundation, but just to give u some idea (if the problem is not solved yet).

:)

adil almost 5 years ago

Hej Simon,

Did you find any solution to the problem you were facing?
I am facing the same problem.

Few days ago I solve this issue but now its not working in another project.

Previous Solution:

I had 4 tabs with 4 slick sliders.

  1. Read specific tab.
  2. inside the specific tab funtion, I use unslick() funtion for the remaining 3 slick sliders, and then use slick() funtion for this tab.

it worked fine, but now its not working in a similar page.

Please share if you manage to get any conclusion for the problem.

Thanks

Simon Pheasey about 5 years ago

Thanks Rafi,

I am trying the following on my foundation tabs...

$(document).foundation({
tab: {
callback : function (tab) {
$('.slider-class').slick();
}
}
});

but it is not working.

Could you elaborate on possible ways I could use the foundation tab callback capability to re-initialise the sliders?

Thanks

Rafi Benkual about 5 years ago

You will probably have to re-init or callback Slick for each tab. You may be able to call a window resize on each tab as well.