title: Slick Slider loaded with display:none creates bad initiation
body: <p>I've got a gallery of thumbs and a Slick slider in a layer on top (z-index), hidden through css with display:none.
  When clicking on of the thumbs the display setting changes to block and the slider shows, But:
  The width/height/left/right etc of the slides are never calculated, check out this fiddle:</p>
  
  <p><a href="http://jsfiddle.net/5eceg5yd/1/">http://jsfiddle.net/5eceg5yd/1/</a></p>
  
  <p>html:</p>
  
  <pre><code>&lt;a href="#"&gt;show slider&lt;/a&gt;
  &lt;div id="addressesList"&gt;
      &lt;div class="addressBox"&gt;
          &lt;p&gt;Mrs Name
              &lt;br&gt;Address1
              &lt;br&gt;London SE15 4DH
              &lt;br&gt;United Kingdom
              &lt;br&gt;
          &lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="addressBox"&gt;
          &lt;p&gt;Mrs Name
              &lt;br&gt;Address 2
              &lt;br&gt;New York SE15 4DH
              &lt;br&gt;United States of America
              &lt;br&gt;
          &lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="addressBox"&gt;
          &lt;p&gt;Mrs Name
              &lt;br&gt;Address3
              &lt;br&gt;London SE15 4DH
              &lt;br&gt;United Kingdom
              &lt;br&gt;
          &lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>#addressesList {
      display: none    
  }
  </code></pre>
  
  <p>jQuery:</p>
  
  <pre><code>var slider = $('#addressesList').slick({   
  });
  
  $('a').on("click", function() {
      $('#addressesList').css('display', 'block'); 
  });
  </code></pre>
  
  <p>Its as if the slider is loaded with display: none, nothing get calculated. Maybe its completly obvious that this should happen but I cant figure out how to create a "lightbox" kind of slider without this working. </p>