Any idea about how to get this working?

[Hermes222222]

I'm using a plugin on WordPress to create carousels that uses Slick, and their programmer asked me to look for your help as I'm using the plugin in a different way than it was planned. 

I have created 4 carousels on my homepage (1,2,3, and 4), and I have managed to hide 3 of them (carousels 2,3 and 4) when loading the page for the first time, so that users can see them by using a nav menu. Users can see only the first carousel, but when they click on tab 2, they see the carousel 2, while the others are hidden, and so on...

On the desktop, Slick works perfectly, as the page loads very fast. But on mobiles, the carousels are hidden with javascript before Slick can calculate correctly the space of every item inside, so, the carousels appear empty when users click on the nav menu.

My question: What even/callback should I use to be sure that carousels are hidden only when they have been correctly created and the space occupied by the items inside has been correctly calculated in the DOM?

Thanks in advance!

Alberto

[carasmo]

Instead of hiding in javascript, I'd use opacity: 0, as follows:

 .my-slider {
    opacity: 0;
    transition: opacity .5s linear;
}

.my-slider.slick-initialized {
    opacity: 1;
}

opacity occupies the correct amount of space. You can also fake hide with positioning off screen with opacity or giving the outer container a 1px max-height and then when it's initialized, make the max-height much higher than the content will ever be and then use an overflow hidden on the non-initialized slider too.

[Hermes222222]

Woow! Thank you so much! That solution worked like a charm. What I did it was to make by default all those galleries have this css: opacity: 0; z-index: -99; overflow: hidden; max-height: 1px; as you suggested me. Then, when you do a click on whichever of the tabs, I apply with javascript a class carousel-rebirth with css: opacity: 1; z-index: 1; overflow: auto; max-height: unset; It works beautifully! Again, thank you so much indeed to put light for me on this issue.