title: slick's slider images load only after clicking a slick-arrow
body: <p>I'm trying to implement Slider Syncing using <code>slick</code> library. I have an array of images called <code>pictures</code> coming from the backend. I loop over these images to populate them under my <code>slider-for</code> and <code>slider-nav</code> divs.</p>
  
  <p>HTML code:</p>
  
  <pre><code>&lt;head&gt;
  &lt;style&gt;
  
  .slick-arrow {
      color: #666666;
      background: red;
  }    
  .slider-for {
      max-width: 960px;
      margin-left: auto;
      margin-right: auto;
      margin-top: 5%;
  }  
  .slider-nav h1 {
      display: inline-block;
  }
  .slider-nav .slick-slide {
      text-align: center;
      width: 337px;
  }
  .container {
    margin-bottom: 5%;
    margin-top: 5%;
  }    
  
  &lt;/style&gt;   
  &lt;link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.5.7/slick.css"/&gt;
  &lt;link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.5.7/slick-theme.css"/&gt;
  &lt;/head&gt;
      &lt;div class="container-fluid padding25"&gt;
        &lt;h2&gt;Pictures&lt;/h2&gt;
            &lt;div class="slider-for"&gt;
              &lt;% var index = 0;%&gt;
              &lt;%_.each(pictures, function(picture) { %&gt;
  
                  &lt;div&gt;
                      &lt;img src="&lt;%=picture.pictureUrl%&gt;" class="img-rounded" width="460" height="345"/&gt;
                  &lt;/div&gt;
              &lt;%
                index++;
                });
              %&gt;
            &lt;/div&gt;
  
              &lt;div class="slider-nav"&gt;
                  &lt;%_.each(pictures, function(picture) { %&gt;
  
                      &lt;div&gt;
                          &lt;img src="&lt;%=picture.pictureUrl%&gt;" class="img-rounded" width="150" height="300"/&gt;
                      &lt;/div&gt;
                  &lt;%
                  index++;
                  });
                  %&gt;   
          &lt;/div&gt; 
  
      &lt;div class="row"&gt;
          &lt;h2&gt;Videos&lt;/h2&gt;
       ...
      &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>javaScript:</p>
  
  <pre><code>&lt;script type="text/javascript" src="/slick-1.5.7/slick/slick.min.js"&gt;&lt;/script&gt;
  
  &lt;script type="text/javascript"&gt;
      $(document).ready(function(){
          console.log("inside docready");
            $('.slider-for').slick({
                slidesToShow: 1,
                slidesToScroll: 1,
                fade: true,
                asNavFor: '.slider-nav',     
            });
  
  
          $('.slider-nav').slick({
            slidesToShow: 3,
            slidesToScroll: 1,
            dots: true,    
            asNavFor: '.slider-for',
            dots: true,
            centerMode: true,
            centerPadding: '3%',    
            focusOnSelect: true,
          });
  
          $('.single-item').slick({
              dots: false,
              arrows: true,
          });
      });
  &lt;/script&gt;  
  </code></pre>
  
  <p>Only one image is visible in the <code>slider-nav</code> on page load. On clicking left/right <code>slick-arrow</code>, the images appear properly. I tried to write the same code in <a href="http://jsfiddle.net/odr1btgw/1/" rel="noreferrer">jsFiddle</a>. But I think it works well there (Not sure if its because I have refrained from using <code>for</code> loop there.)</p>