Divs of the slider Slick.js being shown on loading

Question

When I try to put Slick.js on my site, the loading of the Divs inside appears one under the other and then hidden, about 1 second, how do I solve?

Aqui o código:
<div class="carousel">
<div>
<a href="" alt="Body de bebê com manga longa e curta"> 
<picture>
<source srcset="imagem/imagem-1" media="(max-width: 768px)">
<img srcset="imagem/imagem-1" alt="Body de bebê com manga longa e curta">
</picture></a>
</div>
<div>
 <a href="" alt="Kit banho para bebê"> 
<picture>
<source srcset="imagem/imagem-2" media="(max-width: 768px)">
<img srcset="imagem/imagem-2" alt="Kit banho para bebê">
</picture></a>
</div>
<div>
<a href="" alt="Frete Gratis MakoBaby"> 
<picture>
<source srcset="imagem/imagem-3" media="(max-width: 768px)">
<img srcset="imagem/imagem-3" alt="Frete Gratis Regularmento">
</picture></a>
</div>
<div>
<a href="" alt="Body Macacão Promoção"> 
<picture>
<source srcset="imagem/imagem-4" media="(max-width: 768px)">
<img srcset="imagem/imagem-4" alt="Body macacão para bebê">
</picture></a>
</div>
<div>
<a href="" alt="Mijão para bebê malha sem pé"> 
<picture>
<source srcset="imagem/imagem-5" media="(max-width: 768px)">
<img srcset="imagem/imagem-5" alt="Promoção de Mijão para bebê malha sem pé">
</picture></a>
</div>
<div>
<a href="" alt="Pano de boca para bebê/babete"> 
<picture>
<source srcset="imagem/imagem-6" media="(max-width: 768px)">
<img srcset="imagem/imagem-6" alt="Pano de boca para bebê/babete">
</picture></a>
</div>
<div>
<a href="" alt="Mijões para bebê/culote para bebê"> 
<picture>
<source srcset="imagem/imagem-7" media="(max-width: 768px)">
<img srcset="imagem/imagem-7" alt="Promoção Mijões para bebê/culote para bebê">
</picture></a>
</div>
<div>
<a href=""> <picture>
<source srcset="imagem/imagem-8" media="(max-width: 768px)">
<img srcset="imagem/imagem-8" alt="Macacão de bebê promoção"> </picture> </a>
</div>
</div>

Here my JS and Requisitions

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.7.1/slick-theme.css" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.7.1/slick.css" />
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.7.1/slick.js"></script>
<script>
$(document).ready(function(){
$('.carousel').slick({
  dots: true,
  infinite: true,
  autoplay:true,
  arrows:true,
  speed: 500,
  slidesToShow: 1,
  slidesToScroll: 1,
    responsive: [
    {
      breakpoint: 768,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1,
       }
      }
     ]
    });
});
</script>

My site already has Jquery, so I did not put!

How would I solve this "Slick Divs flash"?

Answer 1

Since no one could help me, I could find a solution.

I used the following JS and CSS requests

//CSS
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.7.1/slick-theme.css" />

<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.css"/>

//JS
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>

<script type="text/javascript" src="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script>

And I made the following JS settings(in my case it was banner, then 1 slide for all)

<script>
$(document).ready(function() {
    $('.carousel').slick({
        infinite: true,
        dots: true,
        arrows:false,
        autoplay: true,
        autoplaySpeed: 6000,
        arrows:false,
  });
}); 
</script>

Now, not to have the "flash sliders" I put the following CSS.

Note: I added the Slick-slider class to all sliders, except the first!

.carousel.slick-initialized{
    visibility:visible;
    opacity:1;
}

.carousel .slick-slider{
    display:none ;
}

.carousel .slick-slider:first-child{
    display:block; visibility:hidden;
} 

.carousel.slick-initialized .slick-slider{
    display:block;visibility:visible!important;
}

Thus, while loading the first slide will be visible, and the other hidden, just when they become active they get on display:block;, so I solved my problem and hope it helps more people too!

Attentiveness, Christiano.