I've implemented 2 sliders with Glide.js and they work well in Chrome and FireFx.
I've tried to implement it in IE11 and Edge and both won't add events to DOM elements, so neither slider works.
Moreover, at some width I'd like to make more than 1 slide appear on screen and glide doesn't want to resize slides so they can fit as they supposed to be.
My questions are:
- Why events doesn't attach(bind/add, i'm not kinda sure what type of action goes to event in glide js) to DOM elements?
- Why styles goes mad with breakpoints i did so there is no more than 1 slide appears?
GlideJS github assumes it's working good at edge and IE11 both, so where am I wrong?
Code: It's imported via module and then compiled by babel in webpack
const tech_section_glide = new Glide('#tech_stack_section_slider', {
type: 'slider',
perView: 4,
animationDuration: 500,
gap: 10,
breakpoints: {
449: {
perView: 1
},
705: {
perView: 2,
},
1024: {
perView: 3
}
}
});
const portfolio_glide = new Glide('#portfolio_slider', {
type: 'slider',
perView: 1,
animationDuration: 300
});
tech_section_glide.mount();
portfolio_glide.mount();
Here how it looks in Chrome: Chrome view
And here how it looks in IE11: