GlideJS - Cannot read property 'children' of undefined

Question

I'm using GlideJS version 3.4 on a site to make a simple slider.

This is my how I'm mounting GlideJS

var slider = $('.glide');

if (slider) {
var glide = new Glide('.glide', {
  type: 'carousel',
  startAt: 0,
  perView: 2
}).mount();
} else {
  console.log("Nothing");
}

Then this is my error:

Uncaught TypeError: Cannot read property 'children' of undefined
    at Object.get (glide:6)
    at Object.mount (glide:6)
    at glide:6
    at G.value (glide:6)
    at G.value (glide:6)
    at <anonymous>:1:7

What I've done so far is check the GlideJS Build and even move things around.

I'm not sure if this is a problem with the HTML or just the Javascript but I'm lost.

Even checked if other things like Bootstrap v4.6 or Jquery was the issue.

Thank you for any answers in advance.

Did you make sure to put this code in `$(document).ready()` or the native equivalent `document.addEventListener("DOMContentLoaded", function(event) { });` of it? That code will return undefined if it cannot find the css class `glide` because it's not loaded in yet. — icecub, Mar 25 '21 at 02:55

score 0 · Answer 1 · answered Jun 12 '21 at 17:25

This basically means that the element that you have mounted glidejs doesn't have images, make sure your structure looks something like this

<div class="glide">
  <div class="glide__track" data-glide-el="track">
    <ul class="glide__slides">
       <li class="glide_slide">
         <img src="/img1.png"/>
       </li>
       <li class="glide_slide">
         <img src="/img2.png"/>
       </li>
       <li class="glide_slide">
         <img src="/img3.png"/>
       </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>

Also make sure that everything is fully loaded before you mount Glide using this function

new Glide('.glide').mount()

GlideJS - Cannot read property 'children' of undefined

1 Answers1