0

我用 Glide.js 实现了 2 个滑块，它们在 Chrome 和 FireFx 中运行良好。

我尝试在 IE11 和 Edge 中实现它，并且两者都不会向 DOM 元素添加事件，所以滑块都不起作用。

此外，在某个宽度上，我想让超过 1 张幻灯片出现在屏幕上，而 glide 不想调整幻灯片的大小，以便它们可以按预期放置。

我的问题是：

  1. 为什么事件不附加（绑定/添加，我不太确定 glide js 中的事件有什么类型的动作）到 DOM 元素？
  2. 为什么样式会因为我所做的断点而疯狂，所以出现的幻灯片不超过 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 视图

以及它在 IE11 中的外观：

IE11_view

4

1 回答 1

0

知道了！问题不在于 GlideJS 本身，而在于我所做的糟糕的 babel 配置，所以如果你想在 IE11 中运行 ES6 标准，你应该进行正确的 babel 配置并安装所需的 Polyfill。这是 IE11 的 webpack+babel 配置指南的链接：https ://medium.com/@ramez.aijaz/transpile-typescript-to-es5-using-babel-and-webpack-f3b72a157399

于 2020-08-11T06:31:59.730 回答