title: Flickity.js gallery crashes on load
body: <p>I am trying to load a simple js based gallery - <a href="https://flickity.metafizzy.co/" rel="nofollow noreferrer">Flickity.js</a></p>
  
  <p>As per mentioned in the example, i tried loading up the gallery which works perfectly fine . </p>
  
  <p>But randomly, the gallery crashes upon page load:</p>
  
  <p><a href="https://i.stack.imgur.com/hzOeG.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/hzOeG.png" alt="enter image description here"></a></p>
  
  <p>the code that i use to initiate the gallery:</p>
  
  <pre><code>&lt;script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"&gt;&lt;/script&gt;
      &lt;script&gt;
      $('.main-carousel').flickity({
          // options
          cellAlign: 'left',
          contain: true,
          pageDots: false,
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>I do understand that this maybe related to the document (images not loading) at the time the script is initiated so as a result , i tried including the document.ready function which infact throws another error . </p>
  
  <pre><code> $( document ).ready(function() {
       $('.main-carousel').flickity({
              // options
              cellAlign: 'left',
              contain: true,
              pageDots: false,
          });
  });
  </code></pre>
  
  <p>the outcome of this is, it shows flickity is not a function. </p>
  
  <p>why is this happening? </p>