title: Initializing hidden Slick.js carousel, items showing with width 0
body: <p>I'm trying to initialize <code>slick</code> on a modal which <strong>is initially hidden</strong>.</p>
  <p>In WordPress, I have a <code>custom post type</code> called <code>experiences</code>. I have <code>ACF</code> fields and trying to extract those field items and show it in a modal popup. So, the way the modal works is:</p>
  <ul>
  <li>On the <code>experiences</code> listing page, user clicks on &quot;Learn more&quot;. Learn more is a trigger to open the modal.</li>
  <li>[On button click, it will get data from those ACF fields for that post]</li>
  <li>The markup with the extracted fields is then appended to the global modal which is found in the footer.</li>
  </ul>
  <p>The container which houses the markup that is appended is <code>#expHTML</code>. This element is hidden and its inner HTML is appended to the <code>#global-modal</code>.</p>
  <p>So, when I'm trying to display the images assigned to an <code>experience</code> post, the <code>img</code>s where <code>slick</code> is initiliazed is showing with <code>width: 0px</code>.</p>
  <p>I have tried to reinit slick on button click, but it doesn't work. Here's what I've tried:</p>
  <pre><code>$('.slick').slick('unslick').slick('reinit').slick();
  
  $(window).trigger('resize');
  </code></pre>
  <p>Neither of them work and the <code>img</code>s are still showing <code>width:0</code></p>
  <p>Demo:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>(function($) {
    $(document).on("click", '.trigger', function(e) {
  
      e.preventDefault();
  
      var modalID = '#global-modal';
      $('.modal').removeClass('modal--open');
  
      $(modalID).fadeIn(200,function(){
        $(this).addClass('modal--open');
      });
  
      var experience_html = $("#expHTML").html();
      $(modalID).html(experience_html);
      return false;
  
      $('.slick').slick('unslick').slick('reinit').slick();
  
    });
  })(window.jQuery);</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.hidden{
    display: none;
  }
  
  a{
    background: lightblue;
    padding: 15px;
    cursor: pointer;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.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;div id="expHTML" class="hidden"&gt;
    &lt;div class="modal"&gt;
      &lt;div class="slick"&gt;
        &lt;img src="https://dummyimage.com/200X200/802380/fff.png&amp;text=IMAGE+1"/&gt;
        &lt;img src="https://dummyimage.com/200X200/374cbf/ffffff.png&amp;text=IMAGE+2"/&gt;
        &lt;img src="https://dummyimage.com/200X200/6ebd7e/ffffff.png&amp;text=IMAGE+3"/&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;a class="trigger"&gt;Click me&lt;/a&gt;
  
  &lt;!-- Modal  popup--&gt;
  &lt;div class="modal" id="global-modal"&gt;
    &lt;div class="modal__inner"&gt;
      &lt;a class="modal__close"&gt;&lt;/a&gt;
      &lt;div class="modal__box"&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>