I am using Swup to create a page transition effects however it's breaking my slick slider. Currently it only works on page refresh but if I navigate to a different page and comeback it's broken. Looking at the documentation I understand that I have to re-load the JavaScript.

In my sliders.js file I have this:

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

And then in my swup.js file I have this:

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

I also get no console errors.