Estoy usando Swup para crear efectos de transición de página, sin embargo, está rompiendo mi control deslizante. Actualmente solo funciona en la actualización de la página, pero si navego a una página diferente y vuelvo, está roto. Mirando la documentación, entiendo que tengo que volver a cargar el JavaScript.

En mi archivo sliders.js tengo esto:

 import "slick-carousel"; const methodSlider = $(".slider-block .slider-wrapper"); export const ourMethodSlider = () => { methodSlider.not(".slick-initialized").slick({ infinite: true, arrows: true, dots: true, prevArrow: $(".prev"), nextArrow: $(".next"), }); }; export const destroyMethodSlider = () => { if ($(methodSlider).hasClass("slick-initialized")) { $(methodSlider).slick("destroy"); $(methodSlider)[0].slick.refresh(); } };

Y luego en mi archivo swup.js tengo esto:

 import Swup from "swup"; import "slick-carousel"; import { destroyMethodSlider, ourMethodSlider } from "./sliders"; function init() { ourMethodSlider(); } function unload() { destroyMethodSlider(); } init(); const swup = new Swup(); swup.on("contentReplaced", init); swup.on("willReplaceContent", unload);

Tampoco recibo errores de consola.