Somehow I made Slick slider work in my project, but now seems I need to restart it when switched between tabs (each tab contains an instance of slider), because only the div in an initially open tab is shown.
You have to force the Slick slider to refresh whenever a new tab is selected.
I targeted the '.w-tab-link' class and added the below jQuery code to my <script>
Replace '.responsive_slider' with whatever class is tied to your Slick slider.
This fix makes the transition between tabs a little clunky since there is a split second delay in the Slick slider loading so I suggest offsetting this by adjusting the tabs easing in type and fade in timing.
$(document).ready(function () {
$('.w-tab-link').on('click', function () {
$('.responsive_slider').slick('refresh');
});
});
You have to force the Slick slider to refresh whenever a new tab is selected.
I targeted the '.w-tab-link' class and added the below jQuery code to my page <script>.
Replace '.responsive_slider' with whatever class is tied to your Slick slider.
This fix makes the transition between tabs a little clunky since there is a split second delay in the Slick slider loading so I suggest offsetting this by adjusting the tabs easing in type and fade in timing.
$(document).ready(function () {
$('.w-tab-link').on('click', function () {
$('.responsive_slider').slick('refresh');
});
});