javascript - 未捕获的 ReferenceError，Splide 未在 HTMLDocument 中定义

Question

我已经按照以下链接中的示例编写了缩略图 slider 的代码 splidejs.com/getting-started对于主 slider 。试图一次又一次地看，但我在输出中看不到任何东西，甚至没有显示图片。已通过 CDN 链接的头文件(CSS 和 js)

代码如下:

头文件

 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/splide@latest/dist/css/splide.min.css">

 <script type="text/javascript" src="catalog.js"></script>
 <link rel="stylesheet" type="text/css" href="catalog.css">

JS 头文件脚本 src="https://cdn.jsdelivr.net/npm/@splidejs/splide@latest/dist/js/splide.min.js">

HTML 代码

 <div class="splide">
  <div class="splide__track">
   <ul class="splide__list">
     <li class="splide__slide"><img src="pic2.jpg"></li>
     <li class="splide__slide"><img src="pic1.jfif"></li>
     <li class="splide__slide"><img src="">pic.png</li>
   </ul>
 </div>

JavaScript 代码

document.addEventListener( 'DOMContentLoaded', function () {
new Splide( '#secondary-slider', {
    fixedWidth : 100,
    height     : 60,
    gap        : 10,
    rewind     : true,
    cover      : true,
    pagination : false,
} ).mount();

});

Answer 1

根据我在您的 JavaScript 代码中看到的内容，您正试图将 Splide 安装在“#secondary-slider”上，但我在您的 HTML 中看不到此 ID。尝试通过使用类“splide”向您的 div 添加相应的 id 属性或在“.splide”上调用 Splide mount 来解决此问题