Tengo un contenedor div con una clase de product . Dentro de este envoltorio hay un enlace de Magnific Popup que debe contener Slick Slider dentro de Magnific Popup . Consulte el código HTML y JavaScript a continuación para su referencia.

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

El problema que veo con el código anterior es que $('.popup-image').magnificPopup({..}) abre una ventana emergente pero no contiene ni envuelve el Slick Slider dentro de la ventana emergente. Por favor, vea la captura de pantalla a continuación.

El contenido de la ventana emergente magnfic parece un galimatías.

¿Sabes qué debo actualizar en el código?

Cualquier ayuda es muy apreciada. Gracias