Hello, Webflowers!
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.
Appreciate your help!
@sabanna @cyberdave @samliew @vincent
Here’s my share link (there’s /slider page)
https://preview.webflow.com/preview/princess-yachts?utm_source=princess-yachts&preview=54aeaff4f280418f873a9cddc449aeea
Hey,
Does anyone have an answer to this? It would be super helpful!
hey! did you ever find a fix for this?
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');
});
});