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);
コンソールエラーも発生しません。