title: Initialize Slick Slider when page loads completely
body: <p>I'm using Slick Slider with content in each slide (text and images):</p>
  
  <pre><code>&lt;div id="misresenas"&gt;
     &lt;div class="resena"&gt;
        &lt;!-- my content --&gt;
     &lt;/div&gt;
     &lt;div class="resena"&gt;
        &lt;!-- my content --&gt;
     &lt;/div&gt;
     &lt;div class="resena"&gt;
        &lt;!-- my content --&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;script src="https://code.jquery.com/jquery-1.12.0.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
    $(document).ready(function() {
        $("#misresenas").slick({
          arrows:false,
          autoplay:true
        });
    });
  &lt;/script&gt;
  </code></pre>
  
  <p>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:</p>
  
  <p><a href="https://i.stack.imgur.com/Fk5p9.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Fk5p9.jpg" alt="enter image description here"></a></p>
  
  <p>I tried to put these lines on CSS but It doesn't work, the slider is completely hidden:</p>
  
  <pre><code>#misresenas{display:none;}
  #misresenas .slick-initialized{display:block;}
  </code></pre>
  
  <p>How can I fix it?</p>