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:
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:
Got it! The problem was not in the GlideJS itself, but in poor babel configuration I've made, so if you want to run ES6 standard in IE11 you should make proper babel configuration and install needed Polyfills. Here is a link to webpack+babel configuration guide for IE11: https://medium.com/@ramez.aijaz/transpile-typescript-to-es5-using-babel-and-webpack-f3b72a157399