javascriptbreakpointsglidejs

Glide slide breakpoints has no effect


I built several slides in the same page with Glidejs:

import Glide, { Controls, Autoplay, Keyboard } from '@glidejs/glide/dist/glide.modular.esm';

let slides = document.getElementsByClassName('g-related');

for (const c of slides) {
  let gid = '#' + c.id;
  let dur = Math.floor((Math.random() * 10000) + 1000);

  new Glide(gid, {
    type: 'carousel',
    autoplay: 10,
    animationDuration: dur,
    animationTimingFunc: 'linear',
    hoverpause: true,
    perView: 5,
    breakpoints: {
      1024: {
        perView: 4,
      },
      600: {
        perView: 3,
      },
    },
  }).mount({ Autoplay })
}

And I use breakpoins as said in docs. All the slides work, but the breakpoints don't work. Why? (hoverpause doesn't work neither).

Aditional info (code in context)

JS:

https://github.com/aitormendez/futurabasura/blob/main/web/app/themes/fb/resources/scripts/singleProduct.js#L47-L67

HTML:

https://github.com/aitormendez/futurabasura/blob/main/web/app/themes/fb/resources/views/woocommerce/single-product/related.blade.php#L62-L73

Working example in staging server (scroll to bottom):

http://fb.e451.net/shop/ill-e-t/


Solution

  • I forgot import Breakpoints from ESM modules:

    import Glide, { Controls, Autoplay, Keyboard, Breakpoints } from '@glidejs/glide/dist/glide.modular.esm';
    

    Then:

    mount({ Autoplay, Breakpoints })