I have a div wrapper with a class of product. Inside this wrapper is a Magnific Popup link that should contain Slick Slider inside the Magnific Popup. Please see the HTML and JavaScript code below for your reference.

<div class="product">
  <a class="popup-image" href="{{ '640x360.png' | asset_url }}">
    <img class="image" src="{{ '640x360.png' | asset_url }}">
    <ul class="gwp-slider" style="display:none; padding: 30px;">
      <li class="item">
        <p>slider 1</p>
      </li>
      <li class="item">
        <p>slider 2</p>
      </li>
      <li class="item">
        <p>slider 3</p>
      </li>                      
    </ul>
  </a>
  <h3 class="title">Test Product</h3>
</div>

// 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();
      }
    }
  });
});

The problem I see with the code above is that the $('.popup-image').magnificPopup({..}) opens a popup but it doesn't contain or wrap the Slick Slider inside the popup. Please see screenshot below.

The contents of magnfic popup looks gibberish.

Do you know what should I update in the code?

Any help is greatly appreciated. Thanks