我在javascript中使用拉斯维加斯幻灯片放映时遇到了麻烦

Question

I have installed the vegas jquery plugin to my project with npm. Now when I try to use it by following the documentation it does not seem to work. I have linked the vegas.min.js and vegas.min.css files in my html.

So, I have tried changing the path to the images, css, js files. Since I thought it had something to do with the path to the image.

HTML:

<div class="container" id="slide">
    <p class="invisible"></p>
</div>

JS:

$(document).ready(function() {
    let imagecollection = [
        {src: './img/slide_0.jpg'},
        {src: './img/slide_1.jpg'},
        {src: './img/slide_2.jpg'},
    ];

    $("#slide").vegas({
        slides: imagecollection,
        transition: 'fade',
        preloadImage: true,
        timer: true,
        shuffle: true,
        delay: 5000,
        animation: 'kenburns',
        cover: true
    });
});

Now, I was hoping it would show the images every 5 seconds and go through the images, but this is not happening. I am not getting any errors in the console.

Answer 1

Found a solution

I made a rookie mistake by linking the JS files before calling the jQuery library. Putting the js files after linking the jQuery fixed the issue!