How to make Glide.js slider work on Wordpress with Oxygen builder?

Please help me to figure out why I can't get the slider to work. I'm using Oxygen builder and trying make a custom carousel slider using the Glide.js. I've added a Code Block on my page to build the structure and initialize slider, here's the code:

<div class="glide">
  <div class="glide__track" data-glide-el="track">
    <ul class="glide__slides">
      <li class="glide__slide"><img class="abimg1" src="/wp-content/uploads/2025/01/blank.png"></li>
      <li class="glide__slide"><img class="abimg2" src="/wp-content/uploads/2025/01/blank.png"></li>
      <li class="glide__slide"><img class="abimg3" src="/wp-content/uploads/2025/01/blank.png"></li>
      <li class="glide__slide"><img class="abimg4" src="/wp-content/uploads/2025/01/blank.png"></li>
    </ul>
  </div>
  <div class="glide__arrows" data-glide-el="controls">
   <button class="glide__arrow glide__arrow--left" data-glide-dir="<">&lt;</button>
   <button class="glide__arrow glide__arrow--right" data-glide-dir=">">&gt;</button>
  </div>
</div>

<script>
new Glide('glide', {
  type: 'carousel',
  startAt: 0,
  autoplay: 4000,
  rewind: true,
  focusAt: 'center',
  perView: 1
})
</script>

I uploaded the CSS and JS files and used the WPcode plugin to link them (in header):

<link rel="stylesheet" type="text/css" href="/wp-content/uploads/glide/glide.core.css" />
<link rel="stylesheet" type="text/css" href="/wp-content/uploads/glide/glide.theme.css" />
<script src="/wp-content/uploads/glide/glide.js"></script>

A single image and left and right buttons appear on the page, the styles are got applied, but the slides don't move (not at the press of a buttons, not by dragging). Actual images are added as background using CSS.

Screenshot

I think I did everything by the instruction from official glide.js site. I have of course tried the default settings for the "new Glide" script and all the styles, no result.

Given my total lack of html and javascript knowledge there is nothing else I figured out to do besides googling "how-to" for a two days, no result.

Solution

I found the solution thanks to @Shoelaced as he mentioned alternative slider called Splide. The installation instructions are very similar to the Glide's, but there is an extra paragraph:

Make sure the target element has been loaded before constructing the Splide instance. You'll need to subscribe a DOMContentLoaded event if you initialize it in a tag:
document.addEventListener( 'DOMContentLoaded', function() { var splide = new Splide( '.splide' ); splide.mount(); } );

I installed Splide first, it worked fine. Then I tried adding the same script for Glide, just changing Splide to Glide in the script, and it worked!

<script>
  document.addEventListener( 'DOMContentLoaded', function() {
    var glide = new Glide( '.glide' );
    glide.mount();
  } );
</script>

I don't know what the ‘DOMContentLoaded’ event is, but that was one of the two things that was missing. The middle line in that code is the same script used to initialise and configure the glider.

The second thing is that the initialising script must start with the var keyword. The slider settings didn't work when I put them in that one big script, so I split it into two. It may not be a perfect execution, but it worked for me.

<script>
  document.addEventListener( 'DOMContentLoaded', function() {
    glide.mount();
  } );
</script>

<script>
var new Glide('.glide', {
  type: 'carousel',
  startAt: 0,
  autoplay: 4000,
  rewind: true,
  focusAt: 'center',
  perView: 1
</script>