0

所以我一直在尝试让 glide.js 在我的项目上工作。按照官方文档中的说明完成了所有步骤，但是一旦我new Glide(".glide").mount();在我的 Web 控制台中使用（就像文档中所说的那样）启动滑翔机，我就会得到

Uncaught ReferenceError: Glide is not defined

这是相关的 HTML：

<head>
<link
  rel="stylesheet"
  href="node_modules/@glidejs/glide/dist/css/glide.core.min.css"
/>
</head>
<body>
<!-- PROJECTS CARD  -->
<div class="card">
  <div class="card-header">Featured</div>
  <div class="card-body">
    <div class="glide">
      <div class="glide__track" data-glide-el="track">
        <ul class="glide__slides">
          <li class="glide__slide">0</li>
          <li class="glide__slide">1</li>
          <li class="glide__slide">2</li>
        </ul>
      </div>

      <div class="glide__bullets" data-glide-el="controls[nav]">
        <button class="glide__bullet" data-glide-dir="=0"></button>
        <button class="glide__bullet" data-glide-dir="=1"></button>
        <button class="glide__bullet" data-glide-dir="=2"></button>
      </div>
    </div>
  </div>
</div>
<!-- GLIDE SCRIPT  -->
<script src="node_modules/@glidejs/glide/dist/glide.min.js"></script>
</body>

这是我的 JS：

new Glide(".glide").mount();

需要注意的是，我已经使用 npm 导入了 glide。这是 package.json 文件的相关部分：

"dependencies": {
"@glidejs/glide": "^3.4.1",
"@popperjs/core": "^2.9.2",
"bootstrap": "^5.0.0-beta3"

我知道我可能犯了一些愚蠢的错误，但我已经尝试了一个多小时来解决这个问题，但没有任何成功。先感谢您！

4

1 回答 1

-1

我看到引用 glide.js 的脚本，但我没有看到初始化语句周围的脚本标签。

这将按照此处https://glidejs.com/docs/setup/ @初始化部分的描述工作。只需将它放在 .js 引用下方，您就可以开始使用了。

<script>
  new Glide('.glide').mount()
</script>
于 2021-07-30T15:58:00.120 回答