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).
JS:
HTML:
Working example in staging server (scroll to bottom):
I forgot import Breakpoints from ESM modules:
import Glide, { Controls, Autoplay, Keyboard, Breakpoints } from '@glidejs/glide/dist/glide.modular.esm';
Then:
mount({ Autoplay, Breakpoints })