如何在 Laravel Vite 中实现 GlideJS

Question

我想在 Laravel Vite 中使用 Vold 实现 GlideJS。当页面重新加载时，GlideJS 可以很好地工作，但是当使用 Volt 热重新加载移动页面时，GlideJS 不起作用。这是我创建的代码：

app.js

import 'bootstrap';
import Glide, { Autoplay, Controls } from '@glidejs/glide/dist/glide.modular.esm';


document.addEventListener('DOMContentLoaded', (event) => {
    if (document.querySelector('.related-posts')) {
        const relatedPosts = new Glide('.related-posts', {
            type: 'carousel',
            autoplay: 2000,
            hoverpause: false,
            perView: 1,
            peek: {
                before: 100,
                after: 50
            }
        });

        relatedPosts.mount({Autoplay, Controls});
    }
});

在这里，我插入了一个有关 GlideJS 如何工作的视频链接：https://streamable.com/9ahogy

当页面重新加载以及使用 Volt 热重载移动页面时，GlideJS 的正确工作方式是什么？

Answer 1

我通过将事件侦听器更改为 alpine:naviged 解决了这个问题

document.addEventListener('alpine:navigated', (event) => {

});