I'm using a WordPress plugin to create several carousels of posts on my homepage which uses Slick.js to create them.

I have created a tab menu with four categories / carousels, so that when I click on any of the items in the menu, that carousel is displayed while the others are hidden.

I hide all the carousels when the homepage is loaded, and I just display the first one that belongs to the first item in the menu.

On desktop, the script is working perfectly, and all the images and text inside the different carousels are displayed beautifully. But on mobile, it seems that carousels are hidden before all the posts (image, title and text) inside are loaded and the space they occupy is calculated.

I'm writing below the code I'm using to show you what I'm doing. Maybe the code is wrong, as I'm not an expert on Javascript (jQuery). In any case, how could I reset the carousels when I click on any item menu, so that all the posts inside are recalculated by Slick again?

jQuery(window).on('load', function () {jQuery('#' + parents_siblings_id).animate({ opacity: 0, zIndex: -99 }, 600, function() {jQuery(window).on('load', function () {
  jQuery('#' + parents_siblings_id).animate({ opacity: 0, zIndex: -99 }, 600, function() {jQuery("#carousel_2").parents('.carousel-wrapper').parent().addClass("hidden");jQuery("#carousel_3").parents('.carousel-wrapper').parent().addClass("hidden");jQuery("#carousel_4").parents('.carousel-wrapper').parent().addClass("hidden");});});});});

Thanks in advance!