javascript - 使用 Swup 重新初始化 Slick 滑块

Question

我正在使用 Swup 创建页面过渡效果，但它破坏了我的光滑滑块。目前它只适用于页面刷新，但如果我导航到不同的页面并返回它就会损坏。查看文档我知道我必须重新加载 JavaScript。

在我的 sliders.js 文件中，我有这个：

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

然后在我的 swup.js 文件中我有这个：

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

我也没有控制台错误。