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?

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

Solution 2

That's the correct code

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

Comments

[Sphinx]

what about adding css like .resena { display:inline-block; } ?.

[NekoLopez]

I used this option but in Chrome it takes a lot of time to load, in another browers like Firefox and Opera it loads faster.

[Rajan Benipuri]

It may be because other browsers are showing you a cached version of your page. Basically $(window).on('load', function()) runs when the document is fully loaded. Please don't use $(window).load in place use $(window).on('load') I have edited my answer please check.