Error using Slick.js in Jquery modal

Question

I’m having trouble using the Slick JS , I’m creating a list of images I bring from the database with PHP.

<ul id="imagemProdContainer" class="imagemProdContainer">
<?php
  if(!empty($galeria)):
    foreach($galeria as $foto):
?>
 <li data-legenda="<?=$foto->legenda;?>">
  <button href="#" id="btnFechaProd" class="btnFechaProd">X</button>
  <img src="assets/uploads/<?=$foto->imagem;?>" alt="<?=$foto->legenda;?>">
  <span><?=$foto->legenda;?></span>
 </li>
<?php
    endforeach;
 endif;
?>
</ul>

Being this a modal that gets display None, and only appears when I click on a thumbnail gallery, which in turn is also a Slick (thumbnails to click and open the modal):

But when clicking on any of the images, what returns me is the modal with the image loaded only in the DOM, but not in the window itself:

When I have some interaction like resize, move to the next slide or click the image appears:

Here is the Java Script statement:

// Galeria Detalhe/Amplia Produtos
{
(function(){
    $('#galeriaProdutos li').on('click touch', function(event){
            var modalImagem = $('#imagemProdContainer'),
            index = $(this).data('slide');

        setTimeout(function(){
                modalImagem.addClass('active');                 
        }, 8);

        setTimeout(function(){
                $('#imagemProdContainer').slick('slickGoTo', index);            
        }, 5);

    });

    $('#imagemProdContainer').on('click touch', function (event){
        var idModal = $(this).attr('id');

        if(idModal == event.target.id){
            $(this).removeClass('active');
        }
    });
})();
}


 // Fechar Galeria Detalhes/Amplia Produtos
{
    (function(){
     btnFecharDetalhe = $('.btnFechaProd');

     btnFecharDetalhe.on('click touch', function(e){
        e.preventDefault();
        $('#imagemProdContainer').removeClass('active');
     });
    })();
}

// Slick Galeria Detalhe/Amplia Produto
{
 $('#imagemProdContainer').slick({
    fade: true,
    arrow: true
 });
}

I added a set timeout to see if it solved and nothing, I tried to check the loading of Slick with on load and nothing, I am developing and the site is on air on a temporary link, this is the link to the page with the problem in question:

http://agenciasayhello.com.br/clientes/svetlana/produto/jardim-vertical

I hope you can help me.

Answer 1

As in the plugin documentation does not report any event when the slider is activated, you can trigger an event resize in function of events click touch below, without the need to use setTimeout and other codes you have entered.

The function of the event should look like this:

// Galeria Detalhe/Amplia Produtos
{
   (function(){
      $('#galeriaProdutos li').on('click touch', function(event){
         var modalImagem = $('#imagemProdContainer');
         modalImagem.addClass('active');                    

         // dispara o resize
         $(window).trigger("resize");
      });

      $('#imagemProdContainer').on('click touch', function (event){
         var idModal = $(this).attr('id');

         if(idModal == event.target.id){
            $(this).removeClass('active');
         }
      });
   })();
}

Answer 2

Fixed with Help of Friend DVD Final Code:

    // Galeria Detalhe/Amplia Produtos
    {
        (function(){
          $('#galeriaProdutos li').on('click touch', function(event){
            var modalImagem = $('#imagemProdContainer'),
            index = $(this).data('slide');

            $('#imagemProdContainer').slick('slickGoTo', index);
            modalImagem.addClass('active');
            $(window).trigger("resize");


         });

       $('#imagemProdContainer').on('click touch', function (event){
         var idModal = $(this).attr('id');

        if(idModal == event.target.id){
            $(this).removeClass('active');
        }
       });
      })();
    }

Thank you!