How to import GlideJS

sage
1

Hello,

I’m trying to import GlideJS. I did the following;

Installed package;
yarn add -D @glidejs/glide

Import styling;
@import '~@glidejs/glide/src/assets/sass/glide.core';

And tried to import it in app.js;
import Glide from '@glidejs/glide';

Now when I use the following code with AlpineJS + Tailwind;

<style>
  .glide__bullet--active {
    background: #333;
  }
</style>

<div x-data="{
    init() {
        new Glide(this.$refs.glide, {
            perView: 2,
            640: {
                perView: 2,
            },
        }).mount()
    },
}">
  <div x-ref="glide" class="glide relative block px-12">
    <div class="glide__track" data-glide-el="track">
      <ul class="glide__slides">
        <li class="glide__slide flex flex-col items-center justify-center pb-6">
          <img class="w-full" src="https://picsum.photos/800/400?random=1" alt="placeholder image">
        </li>

        <li class="glide__slide flex flex-col items-center justify-center pb-6">
          <img class="w-full" src="https://picsum.photos/800/400?random=2" alt="placeholder image">
        </li>

        <li class="glide__slide flex flex-col items-center justify-center pb-6">
          <img class="w-full" src="https://picsum.photos/800/400?random=3" alt="placeholder image">
        </li>

        <li class="glide__slide flex flex-col items-center justify-center pb-6">
          <img class="w-full" src="https://picsum.photos/800/400?random=4" alt="placeholder image">
        </li>

        <li class="glide__slide flex flex-col items-center justify-center pb-6">
          <img class="w-full" src="https://picsum.photos/800/400?random=5" alt="placeholder image">
        </li>

        <li class="glide__slide flex flex-col items-center justify-center pb-6">
          <img class="w-full" src="https://picsum.photos/800/400?random=6" alt="placeholder image">
        </li>
      </ul>
    </div>

    <div class="glide__arrows pointer-events-none absolute inset-0 flex items-center justify-between" data-glide-el="controls">
      <!-- Previous Button -->
      <button class="glide__arrow glide__arrow--left pointer-events-auto disabled:opacity-50" data-glide-dir="<">
        <span aria-hidden="true">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3">
            <path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" />
          </svg>
        </span>
        <span class="sr-only">Skip to previous slide page</span>
      </button>

      <!-- Next Button -->
      <button class="glide__arrow glide__arrow--left pointer-events-auto disabled:opacity-50" data-glide-dir=">">
        <span aria-hidden="true">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3">
            <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
          </svg>
        </span>
        <span class="sr-only">Skip to next slide page</span>
      </button>
    </div>

    <!-- Bullets -->
    <div class="glide__bullets flex w-full items-center justify-center gap-1" data-glide-el="controls[nav]">
      <button class="glide__bullet h-3 w-3 rounded-full bg-gray-300 transition-colors" data-glide-dir="=0"></button>
      <button class="glide__bullet h-3 w-3 rounded-full bg-gray-300 transition-colors" data-glide-dir="=1"></button>
      <button class="glide__bullet h-3 w-3 rounded-full bg-gray-300 transition-colors" data-glide-dir="=2"></button>
      <button class="glide__bullet h-3 w-3 rounded-full bg-gray-300 transition-colors" data-glide-dir="=3"></button>
      <button class="glide__bullet h-3 w-3 rounded-full bg-gray-300 transition-colors" data-glide-dir="=4"></button>
      <button class="glide__bullet h-3 w-3 rounded-full bg-gray-300 transition-colors" data-glide-dir="=5"></button>
    </div>
  </div>
</div>

The styling is added, but the JS isn’t working. Am I doing something wrong?
Probably, but I would like to understand what I’m doing wrong.

Thanks!

2

Are you getting an error? Have you tried to initialize it without Alpine to rule out any possible conflicts?

I’m guessing that if you’re trying to use Glide on the front-end of your site like you showed that Glide isn’t actually available for the browser.

Try:

import Glide from '@glidejs/glide';

window.Glide = Glide;
3

Hi Ben, thanks this solved it! Too bad I couldn’t figure it out myself.
I realise now that Alpine is being imported the same way.

This is my app.js file.

import {domReady} from '@roots/sage/client';

// Alpine
import Alpine from 'alpinejs';
import collapse from '@alpinejs/collapse';
import focus from '@alpinejs/focus';
import persist from '@alpinejs/persist';
import intersect from '@alpinejs/intersect';

// AOS
import AOS from 'aos';

// Glide
import Glide from '@glidejs/glide';
window.Glide = Glide;

/**
 * app.main
 */
const main = async (err) => {
  if (err) {
    // handle hmr errors
    console.error(err);
  }

  // application code
  // Alpine
  Alpine.plugin(collapse)
  Alpine.plugin(focus)
  Alpine.plugin(persist)
  Alpine.plugin(intersect)
  window.Alpine = Alpine
  Alpine.start()

  // AOS
  AOS.init({
    delay: 200,
    duration: 1000,
    once: true
  });
};

/**
 * Initialize
 *
 * @see https://webpack.js.org/api/hot-module-replacement
 */
domReady(main);
import.meta.webpackHot?.accept(main);

Why can’t I place ‘window.Glide = Glide;’ under Application code?
Like I do with Alpine or is this a bad practice? Whenever I do this the slider stops working.

Thanks anyway!

4

I’m not sure what “stops working” means — do you have an error? This worked in my testing without an error

import {domReady} from '@roots/sage/client';

import Glide from '@glidejs/glide';

/**
 * app.main
 */
const main = async (err) => {
  if (err) {
    // handle hmr errors
    console.error(err);
  }

  // application code
  window.Glide = Glide;
};
5

Hi Ben,

Thanks for putting time into this, I really appreciate it.

If I import it like this it works;

  // Glide
  window.Glide = Glide

  // Alpine
  Alpine.plugin(collapse)
  Alpine.plugin(focus)
  Alpine.plugin(persist)
  Alpine.plugin(intersect)
  window.Alpine = Alpine
  Alpine.start()

  // AOS
  AOS.init({
    delay: 200,
    duration: 1000,
    once: true
  });

But if I change the order it stops working;

  // application code
  // Alpine
  Alpine.plugin(collapse)
  Alpine.plugin(focus)
  Alpine.plugin(persist)
  Alpine.plugin(intersect)
  window.Alpine = Alpine
  Alpine.start()

  // Glide
  window.Glide = Glide

  // AOS
  AOS.init({
    delay: 200,
    duration: 1000,
    once: true
  });

The error that I get is;

Uncaught (in promise) ReferenceError: Glide is not defined

Do you know why I can’t order it like the first example?
It weird that Glide isn’t defined based on order of importing.

Thanks!

6

Maybe alpine was trying to use Glide, but Glide isn’t defined yet in your second example in the point of view of Alpine?