Initialize Slick Slider when page loads completely

Question

I'm using Slick Slider with content in each slide (text and images):

<div id="misresenas">
   <div class="resena">
      <!-- my content -->
   </div>
   <div class="resena">
      <!-- my content -->
   </div>
   <div class="resena">
      <!-- my content -->
   </div>
</div>

<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<script type="text/javascript">
  $(document).ready(function() {
      $("#misresenas").slick({
        arrows:false,
        autoplay:true
      });
  });
</script>

The problem is when I load page, at the beginning Slick Slider looks like this with one slide above the other until it finishes load page and then it starts working:

I tried to put these lines on CSS but It doesn't work, the slider is completely hidden:

#misresenas{display:none;}
#misresenas .slick-initialized{display:block;}

How can I fix it?

Answer 1

Here you go. Replace $(document).ready() with $(window).load() function.

<script type="text/javascript">
  $(window).on('load', function() {
     $("#misresenas").slick({
       arrows:false,
       autoplay:true
     });
  });
</script>

Answer 2

That's the correct code

#misresenas{display:none;}
#misresenas.slick-initialized{display:block;}