0

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

コンソールエラーも発生しません。

4

0 に答える 0