javascriptfrontendglidejs

Why GlideJS doesn't set event listeners in IE11?


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:

  1. 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?
  2. 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:

IE11_view


Solution

  • 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