为什么 GlideJS 在 IE11 中不设置事件监听器?
Why GlideJS doesn't set event listeners in IE11?
我用 Glide.js 实现了 2 个滑块,它们在 Chrome 和 FireFx 中运行良好。
我尝试在 IE11 和 Edge 中实现它,但都不会向 DOM 元素添加事件,因此滑块都不起作用。
此外,在某些宽度下,我想让超过 1 张幻灯片出现在屏幕上,而 glide 不想调整幻灯片的大小,以便它们可以按预期的方式显示。
我的问题是:
- 为什么事件没有附加(bind/add,我不太确定在 glide js 中事件发生什么类型的动作)到 DOM 元素?
- 为什么我设置的断点会使样式变得疯狂,所以出现的幻灯片不超过 1 张?
GlideJS github 假定它在 edge 和 IE11 上都运行良好,那么我哪里错了?
代码:
通过module导入,然后在webpack中通过babel编译
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();
在 Chrome 中的外观如下:
Chrome view
这是它在 IE11 中的样子:
IE11_view
知道了!问题不在于 GlideJS 本身,而是我所做的糟糕的 babel 配置,所以如果你想在 IE11 中使用 运行 ES6 标准,你应该进行适当的 babel 配置并安装所需的 Polyfills。这里是 link 到 webpack+babel IE11 的配置指南:https://medium.com/@ramez.aijaz/transpile-typescript-to-es5-using-babel-and-webpack-f3b72a157399
我用 Glide.js 实现了 2 个滑块,它们在 Chrome 和 FireFx 中运行良好。
我尝试在 IE11 和 Edge 中实现它,但都不会向 DOM 元素添加事件,因此滑块都不起作用。
此外,在某些宽度下,我想让超过 1 张幻灯片出现在屏幕上,而 glide 不想调整幻灯片的大小,以便它们可以按预期的方式显示。
我的问题是:
- 为什么事件没有附加(bind/add,我不太确定在 glide js 中事件发生什么类型的动作)到 DOM 元素?
- 为什么我设置的断点会使样式变得疯狂,所以出现的幻灯片不超过 1 张?
GlideJS github 假定它在 edge 和 IE11 上都运行良好,那么我哪里错了?
代码: 通过module导入,然后在webpack中通过babel编译
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();
在 Chrome 中的外观如下: Chrome view
这是它在 IE11 中的样子:
IE11_view
知道了!问题不在于 GlideJS 本身,而是我所做的糟糕的 babel 配置,所以如果你想在 IE11 中使用 运行 ES6 标准,你应该进行适当的 babel 配置并安装所需的 Polyfills。这里是 link 到 webpack+babel IE11 的配置指南:https://medium.com/@ramez.aijaz/transpile-typescript-to-es5-using-babel-and-webpack-f3b72a157399