How to combine Slick gallery with modal window?

Question

JavaScript

I'm doing the landing myself and ran into a problem.
Test here .
I use Slick to implement the gallery. As you can see, there are reviews below, in which the first slide loads perfectly.
If you click on the "Details" button on the first product, then a modal window, implemented on bootstrap, opens.
I loaded another Slick gallery into it (already with a different ID), but the first image does not load until you click on the navigation buttons below or on the sides.
The question is how to combine bootsrap and slick and make the slider work in the modal window? What prevents the image from loading immediately?

Answer 1

Initially, the hidden image has a width of 0. At this moment, the initialization of the slider is working out for you.
The solution is to initialize or resize (look in the docs) the slider when opening the modal.
In your test, the problem is not visible, there is a fancybox slider