title: How do I integrate slick slider inside the popup of Magnific Popup?
body: <p>I have a div wrapper with a class of <code>product</code>. Inside this wrapper is a <strong>Magnific Popup</strong> link that should contain <code>Slick Slider</code> inside the <code>Magnific Popup</code>. Please see the HTML
  and JavaScript code below for your reference.</p>
  <pre><code>&lt;div class=&quot;product&quot;&gt;
    &lt;a class=&quot;popup-image&quot; href=&quot;{{ '640x360.png' | asset_url }}&quot;&gt;
      &lt;img class=&quot;image&quot; src=&quot;{{ '640x360.png' | asset_url }}&quot;&gt;
      &lt;ul class=&quot;gwp-slider&quot; style=&quot;display:none; padding: 30px;&quot;&gt;
        &lt;li class=&quot;item&quot;&gt;
          &lt;p&gt;slider 1&lt;/p&gt;
        &lt;/li&gt;
        &lt;li class=&quot;item&quot;&gt;
          &lt;p&gt;slider 2&lt;/p&gt;
        &lt;/li&gt;
        &lt;li class=&quot;item&quot;&gt;
          &lt;p&gt;slider 3&lt;/p&gt;
        &lt;/li&gt;                      
      &lt;/ul&gt;
    &lt;/a&gt;
    &lt;h3 class=&quot;title&quot;&gt;Test Product&lt;/h3&gt;
  &lt;/div&gt;
  
  // Shorthand for document.ready
  $(function() {
    $('.popup-image').magnificPopup({
      type: 'ajax',
      fixedContentPos: true,
      callbacks: {
        open() {
          const gwpSlider = $('.gwp-slider');
  
          if (!gwpSlider.hasClass('slick-initialized')) {
            gwpSlider.slick({
              infinite: true,
              speed: 300,
              slidesToShow: 1,
              slidesToScroll: 1,
              cssEase: 'linear',
            });
          }
          gwpSlider.show();
        }
      }
    });
  });
  </code></pre>
  <p>The problem I see with the code above is that the <code>$('.popup-image').magnificPopup({..})</code> opens a popup but it doesn't contain or wrap the <code>Slick Slider</code> inside the popup. Please see screenshot below.</p>
  <p><a href="https://i.stack.imgur.com/5gL3T.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5gL3T.png" alt="enter image description here" /></a></p>
  <p>The contents of magnfic popup looks gibberish.
  <a href="https://i.stack.imgur.com/VOFyK.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/VOFyK.png" alt="enter image description here" /></a></p>
  <p>Do you know what should I update in the code?</p>
  <p>Any help is greatly appreciated. Thanks</p>