0

So I've been trying to get glide.js to work on my project. Did all the steps as it says in the official documentation, but once I start the glider with new Glide(".glide").mount(); (just like it says in the documentation) in my web console I get

Uncaught ReferenceError: Glide is not defined

Here is the relevant 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>

Here is my JS :

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

Something to note is that I've imported glide using npm. Here's the relevant part of the package.json file :

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

I understand that I'm probably making some dumb mistake but I've been trying to figure this out for over an hour without any success. Thank you in advance!

DaivarasDev
  • 17
  • 1
  • 5

1 Answers1

-1

I see the script referencing glide.js but I don't see script tags around the initialization statement.

This will work as described here https://glidejs.com/docs/setup/ @ the Initialization section. Simply place it below the .js reference and you will be good-to-go.

<script>
  new Glide('.glide').mount()
</script>
Fettabachi
  • 79
  • 6