Slick: Multiple Sliders inside Bootstrap 4 Tabs

[fnonaka]

# Multiple Slick sliders inside Bootstrap(4) tabs bug:

I have 2 tabs and one Slick slider in each tab.
The 1st slider works fine, but if I click on the 2nd tab, the slider seems to be not initialized or stucked. It works only if I click anywhere in the slider. It looks like it needs a click to activate the 2nd tab content. The problem is with Bootstrap... can't solve that and I have to finish it to leave for my vacation lol please help me!!!!!!!!

====================================================================

Check the problem:
http://jsfiddle.net/fmo50w7n/2345/

====================================================================

Steps to reproduce the problem

1. Create 2 tabs with Bootstrap 4
2. Put 1 Slick slider in each tab.
3. Run
4. The 1st tab is ok. The 2nd slick slider in the 2nd tab is stucked.

====================================================================

What is the expected behaviour?

Both slick slider working

====================================================================

What is observed behaviour?

The 2nd slick slider is stucked. It works only if I click anywhere in the slick slider' components.

====================================================================

More Details

• Which browsers/versions does it happen on?
  Chrome, IE, FF

• Which jQuery/Slick version are you using?
  Last one

• Did this work before?
  No

[pablohenriqueop]

Same here buddy, waiting for a help.

[fnonaka]

My friend found the solution! You have to call the "refresh" method of each Slick slider, when you click on the tabs, so it works! I will ask the code and put it here.

[fnonaka]

That's it:
If you have for example, 3 slick sliders (one in each tab), just put this script below, and don't forget to delete the "fade" css class of the tabs too.

$("#tab1").click(function(){
$('.carousel-1').slick('refresh');
});

$("#tab2").click(function(){
$('.carousel-2').slick('refresh');
});

$("#tab3").click(function(){
$('.carousel-3').slick('refresh');
});

You have to refresh the slick sliders, because Bootstrap tabs make them not visible if you don't click the tabs.

[fnonaka]

Found the solution... go to the page to get the answer!

http://www.avg.com/email-signature?utm_medium=email&utm_source=link&utm_campaign=sig-email&utm_content=webmail
Livre
de vírus. www.avg.com
http://www.avg.com/email-signature?utm_medium=email&utm_source=link&utm_campaign=sig-email&utm_content=webmail.
<#DAB4FAD8-2DD7-40BB-A1B8-4E2AA1F9FDF2>

2018-03-12 1:43 GMT-03:00 Pablo Henrique [e-mail]:

Same here buddy, waiting for a help.

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/kenwheeler/slick/issues/3366#issuecomment-372192318,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AFgqXJe_HLD37Pq9sxRsumjpl21F3Qi7ks5tdfzVgaJpZM4Sjufg
.

[MloneThakuri]

you can change the bootstrap css of tab too. the code is 👍
/* 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 */

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

I found this somewhere on the internet, it is really easy and useful.

[sinjuangajan]

Visibility problem when switching tabs in bootstrap 4
Solution
.tab-content>.tab-pane{ display: block; height: 0px; overflow: hidden; }
.tab-content>.active{ height: auto;}

[soheil233]

That's it:
If you have for example, 3 slick sliders (one in each tab), just put this script below, and don't forget to delete the "fade" css class of the tabs too.

$("#tab1").click(function(){
$('.carousel-1').slick('refresh');
});

$("#tab2").click(function(){
$('.carousel-2').slick('refresh');
});

$("#tab3").click(function(){
$('.carousel-3').slick('refresh');
});

You have to refresh the slick sliders, because Bootstrap tabs make them not visible if you don't click the tabs.

Thank You! Your solution working perfectly!

[valecj]

Same problem with mat-tab (Material Angular)

[im4udeepak]

That's it:
If you have for example, 3 slick sliders (one in each tab), just put this script below, and don't forget to delete the "fade" css class of the tabs too.

$("#tab1").click(function(){
$('.carousel-1').slick('refresh');
});

$("#tab2").click(function(){
$('.carousel-2').slick('refresh');
});

$("#tab3").click(function(){
$('.carousel-3').slick('refresh');
});

You have to refresh the slick sliders, because Bootstrap tabs make them not visible if you don't click the tabs.

Use Main parent tab in js and user only one slider in diffrenrent tabs put is js in bottom of slider

$(".tab-sec .nav li").click(function(){
$('.shop-slider').slick('refresh');
});

[SamrtDesign]

Many many thanks it works for me.