Estoy usando un complemento de WordPress para crear varios carruseles de publicaciones en mi página de inicio que usa Slick.js para crearlas.

He creado un menú de pestañas con cuatro categorías/carruseles, de modo que cuando hago clic en cualquiera de los elementos del menú, se muestra ese carrusel mientras que los demás están ocultos.

Oculto todos los carruseles cuando se carga la página de inicio y solo muestro el primero que pertenece al primer elemento del menú.

En el escritorio, la secuencia de comandos funciona perfectamente y todas las imágenes y el texto dentro de los diferentes carruseles se muestran a la perfección. Pero en el móvil, parece que los carruseles están ocultos antes de que se carguen todas las publicaciones (imagen, título y texto) y se calcule el espacio que ocupan.

Estoy escribiendo debajo del código que estoy usando para mostrarte lo que estoy haciendo. Tal vez el código esté mal, ya que no soy un experto en Javascript (jQuery). En cualquier caso, ¿cómo podría restablecer los carruseles cuando hago clic en cualquier menú de elementos, de modo que Slick vuelva a calcular todas las publicaciones internas?

 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");});});});});

¡Gracias por adelantado!