Glide: GlideJS destroy() function causes 'resize' event error.

[Danielvandervelden]

Hi,

So I'm having issues with the destroy functionality. I want the carousel to be initialized on mobile phones, and on resize if the window width is bigger than the JSON init property, destroy the carousel. It looks as follows:

initCarousel() {
    if(this.config.init >= this.windowWidth) {
        this.carousel = new Glide(this.el, this.config);
        this.carousel.on('resize', function() {
            this.windowWidth = window.innerWidth;
            if(this.config.init < this.windowWidth && this.carousel != undefined) {
                this.carousel.destroy();
             }
        }.bind(this));

        this.carousel.mount();
    }
}

Here you can see I create the carousel if the init property (640px in this case) is larger or equal to the window width. Then I add a resize event listener which checks if the window is bigger than the init property. If so: destroy.

It destroys it just fine. But as soon as the carousel gets destroyed I get the following error in the console:

Uncaught TypeError: Cannot read property 'resize' of undefined
at EventsBinder.off (glide.esm.js?fe9b:1951)
at Object.unbind (glide.esm.js?fe9b:2006)
at eval (glide.esm.js?fe9b:2015)
at eval (glide.esm.js?fe9b:556)
at Array.forEach (<anonymous>)
at EventsBus.emit (glide.esm.js?fe9b:555)
at Glide$$1.destroy (glide.esm.js?fe9b:699)
at VlCarousel.eval (module.gallery.js?e992:30)
at eval (glide.esm.js?fe9b:556)
at Array.forEach (<anonymous>)

Do I need to unbind this resize event somewhere?

[gautamz07]

@Danielvandervelden can you try ::-

this.carousel._e.on('resize' ......

The Eventbus is attached to this._e on the Glide class hence this syntax

[mciastek]

I experienced the same error, when I tried to mount and destroy slider depending on window's width. Pseudocode:

{
  constructor() {
    this.carousel = new Glide(this.element);
    this.attachListeners();

    this.toggle();
  }

  mount() {
    this.carousel.mount();
    this.destroyed = false;
  }

  unmount() {
    if (this.carousel) {
      this.carousel.destroy();
      this.destroyed = true;
    }
  }

  attachListeners() {
     window.addEventListener('resize', this.resize);
  }

  resize = debounce(() => {
    this.toggle();
  }, 200);

  toggle() {
    if (window.innerWidth > 1024) {
      this.unmount();
    } else if (this.destroyed) {
      this.mount();
    }
  }
}

This uncaught error breaks carousel destroying process, so carousel is randomly destroyed. I'm not sure how to make a workaround. Any help would be grateful.

EDIT

It looks like Event's Binder destroy() is called one extra time, just before calling off(). Probably Resize component is calling destroy() too many times.

[SylvainFaure]

Hi,
I'm facing the same error and I don't manage to find any solution
Did someone find one or a workaround to this problem?
Any help would be appreciated

[kozichpolina]

if (window.matchMedia('(min-width: 768px)').matches) {
   glide.update({startAt: 0, perView: 1, gap: 0, peek: 0}).disable();
} else {
   glide.enable();
}

it seems that reseting glide settings with update() and then applying disable() helped me.