Divs do slider slick.js sendo mostrada no carregamento

Quando tento colocar slick.js no meu site, o carregamento das divs dentro aparece uma embaixo da outra e depois oculta, coisa de 1 segundo, como faço para resolver?

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>

Aqui meu JS e Requisições

<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>

Meu site já tem Jquery, por isso não coloquei!

Como eu faria para resolver esse "flash das divs do slick"?