Your code looks mostly correct, but there are a few things to check:

1. Selector Issue

Your new Glide('glide', {...}) is incorrect. Glide.js expects a class selector (.glide), but your code is passing 'glide', which Glide will interpret as an ID (#glide).

Change this line:

new Glide('glide', { ... })

to:

new Glide('.glide', {
  type: 'carousel',
  startAt: 0,
  autoplay: 4000,
  rewind: true,
  focusAt: 'center',
  perView: 1
}).mount();

Notice the .glide selector and the missing .mount() call, which is required to initialize Glide.

2. Ensure Glide.js is Loaded

Open your browser console (F12 > Console) and check for errors. Also, test if Glide is actually available by running:

console.log(typeof Glide);

If it returns "undefined", your script is not loading properly.

3. Check Dependencies

Make sure your file paths are correct. Open these links in a new tab:

• /wp-content/uploads/glide/glide.core.css
• /wp-content/uploads/glide/glide.theme.css
• /wp-content/uploads/glide/glide.js

If they don’t load, the issue is with your WPCode setup.

4. Ensure JS Runs After DOM Load

Try wrapping your script in DOMContentLoaded to ensure it initializes after the page loads:

document.addEventListener("DOMContentLoaded", function () {
  new Glide('.glide', {
    type: 'carousel',
    startAt: 0,
    autoplay: 4000,
    rewind: true,
    focusAt: 'center',
    perView: 1
  }).mount();
});

5. Try a CDN Version

To rule out file path issues, use a CDN version of Glide.js:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@glidejs/glide/dist/css/glide.core.min.css" />
<script src="https://cdn.jsdelivr.net/npm/@glidejs/glide"></script>

If this works, then your WPCode setup might be incorrect.

Next Steps

1. Check for console errors (F12 > Console).
2. Manually call Glide.mount() in the console.
3. Test with the CDN version.

Let me know if you still have issues! 🚀