javascript - 未捕获的 ReferenceError,Splide 未在 HTMLDoc

我已经按照以下链接中的示例编写了缩略图 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();

});

最佳答案

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

关于javascript - 未捕获的 ReferenceError,Splide 未在 HTMLDocument 中定义,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/65317388/

相关文章:

node.js - 使用 React Hook Form 不可编辑字段

delphi - Delphi Sydney 10.4.1 上的 QuickReport

php - 如何在 Laravel 中使用 Angular

ios - 在真实设备上运行应用程序时 Xcode : No code signature foun

reactjs - 为什么我的自定义路由没有将正确的路径传递给子组件?

javascript - 在 URL 中传递 Javascript 变量

flutter - 应用程序构建后,google_fonts 无法正常工作

python - 如何在 Python 中生成独立的解析器?

git - 将 VSCode 设置为我的 Mac M1 的默认 Git 编辑器

python-3.7 - 操作系统错误 : no library called "cairo" er