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

Question

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.

There are too many possible issues for us to help, unfortunately, but the first place you should look is your console. Open your dev tools (right click -> Inspect in Chrome) and on the Console tab, see if there are errors. — Shoelaced
– Shoelaced, Commented Jan 23 at 2:34
Try putting a '.glide' instead of just 'glide' in the script class call to ensure it's looking for a class. Or try using an ID. — Shoelaced
– Shoelaced, Commented Jan 23 at 12:18
@Shoelaced Tried both, nothing worked, but I also tried putting a random class in there and got the same result, then I deleted the script completely and got the same result. This should mean that there's a problem is related to the script. — Lex-ex-x
– Lex-ex-x, Commented Jan 23 at 13:42
Not sure mate, but you might want to check the Glide.js docs on the website. I just checked and in their example they have the dot in front of the class. But there may be another issue as well. I've never used Glide but I've used Splide.js many times in Oxygen -- but it works the same way, so Glide should work. Either it's not loading the JS or there's a conflict. Maybe try loading the files from the CDN instead of your media library. — Shoelaced
– Shoelaced, Commented Jan 24 at 11:47

Steve H. · Accepted Answer · 2025-01-23 18:01:58Z

0

Setting the class using <div class="glide"> is fine, but in order to identify the actual element, you should use an ID:

<div class="glide" id="myGlide">

And then in your code, use:

new Glide('myGlide', {

I'm not that familiar with Oxygen, so it may require:

new Glide('#myGlide', {

edited Jan 23 at 18:01

answered Jan 23 at 17:17

Steve H.

6,9672 gold badges32 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Lex-ex-x Jan 24 at 10:38

Already tried using an ID, didn't worked. "#" didn't helped as well.

Lex-ex-x · Accepted Answer · 2025-02-01 08:19:24Z

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(); } );

First I installed Splide, it worked fine. Then I tried to use the same script for Glide, just changing Splide to Glide in it, and that 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. It may not be a perfect execution, coz I don't have an understandig, but it worked for me.

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

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related