问题标签 [glidejs]

我在两页中包含一个滑块index.html，about.html. index.html页面滑块运行没有问题，但另一个 HTML 文件 ,有about.html错误：

[滑动警告]：根元素必须是现有的 Html 节点类型错误：this.root is undefined

似乎这Glide找不到从中初始化的元素。我该如何解决这个问题？

可以在我提交的 GitHub 问题以及其他用户发布的相关问题上找到更多信息。

我有一个 GlideJS 轮播，需要在幻灯片中播放视频时暂停自动播放。自动播放组件具有启动和停止方法，但我无法从文档中得知如何访问组件方法。

如何访问这些方法？

我将 Glide.js 用于轮播，但活动项目的宽度总是小于其他项目的宽度，这是由 glide.js 设置的。

正如您在此视频中看到的那样，该高度较小，使其不一致且难看：https ://vimeo.com/323290507

我已经尝试添加一个“DOMContentLoaded”事件侦听器来获取活动项目的节点和克隆节点（包含正确的高度）并将活动幻灯片的宽度更改为与另一个相同的宽度，这只有效第一次，因为每次更改当前幻灯片时 glide 总是更改宽度。

我也尝试过使用 MutationObserver 但我不确定它是如何工作的，而且我没有得到它。

这是我的代码：

我正在尝试使用 glidejs 作为网站上的滑块，但是我无法让项目符号正常工作。项目符号位于此页面上 glidejs 网站示例的底部：https ://glidejs.com/docs/options/在我的网站上，项目符号显示，但单击它们不会更改幻灯片。我还没有找到任何关于需要在 glidejs 的初始化中传递以使这些工作正常的选项的文档。据我从 glidejs 网站可以看出，初始化 glide 应该可以自动完成这项工作。我所做的所有其他事情都按预期工作，例如在计时器上更改幻灯片以及为下一张和上一张幻灯片设置箭头导航。我在一个名为 glideInit.js 的文件中有初始化代码，如下所示：

这是我为滑块准备的 html：

目标是根据浏览器宽度禁用或启用滑块功能。

我的代码在窗口从大到小/从小到大调整大小的前几次完美运行，但是当窗口> = 1200并且控制台显示“TypeError：this.listeners is undefined”时，它停止禁用滑块滑翔。摧毁

我花了几个小时在谷歌上搜索这些错误，但仍然无法弄清楚。我对 jQuery 完全陌生，并且在使用它时遇到了很大的困难。

查看我的浏览器控制台，似乎在某些时候glide.mount()立即开始运行glide.destroy，我不知道为什么。这是我所看到的（出于隐私原因，网站名称已编辑）：

JQMIGRATE：已安装 Migrate，版本 1.4.1 jquery-migrate.min.js:2:552

安装真正的 glide-custom-test-03.js:44:34

will-change 内存消耗太高。预算限制是文档表面积乘以 3（289296 像素）。超出预算的意愿变化将被忽略。

销毁错误的 glide-custom-test-03.js:38:36

安装真正的 glide-custom-test-03.js:44:34

TypeError: this.listeners is undefinedglide.min.js:6:5987

值-/wp-content/themes/mytheme/js/slider/glide/dist/glide.min.js?ver=1.1:6

取消绑定-/wp-content/themes/mytheme/js/slider/glide/dist/glide.min.js?ver=1.1:6

调整大小 -/wp-content/themes/mytheme/js/slider/glide/dist/glide.min.js?ver=1.1:6

值-/wp-content/themes/mytheme/js/slider/glide/dist/glide.min.js?ver=1.1:6

forEach 自托管：262

值-/wp-content/themes/apt2c/js/slider/glide/dist/glide.min.js?ver=1.1:6

值-/wp-content/themes/apt2c/js/slider/glide/dist/glide.min.js?ver=1.1:6

doneResizing -/wp-content/themes/apt2c/js/slider/glide/custom/glide-custom-test-03.js?ver=1.1:37

我正在尝试将 glidejs 添加到 wordpress 网站，它在桌面上运行良好，但在移动设备上，它没有加载，似乎 JS 文件没有被执行。我在控制台中没有看到任何错误。这是密码笔。在手机上，我看到 3 张图片相互重叠。

模板

函数.php

glide.js 是

我打算用 glide.js 替换 slick.js 滑块。但我需要一个我在 Slick 中使用过但在 Glide 中找不到的功能：同步两个滑块。因为我使用一个用于导航（带有小图像）和一个用于主视图（带有最大的图像，一张一张）。您可以在网页上看到一个示例：https ://www.variance-auto.com/materiels-de-pose/Ecarteur-de-Joint-Edge-pour-ecarter-le-joint-lecheur

请问如何使用 Glide 实现它？

感谢您的到来帮助。

如果视口在一个范围之间，我必须将幻灯片宽度设置为特定大小。

该文档指出您可以在设置中使用 slideWidth，所以我假设它在断点中，但是没有关于如何做到这一点的示例，我也没有找到它的示例。整个界面是响应式的，所以即使 slideWidth 在幕后工作，幻灯片的宽度无论如何都会改变。

我也尝试过使用纯 CSS，但 Glide 当然会负责并在发生调整大小事件时覆盖。也尝试使用纯 JS 并自己测量视口，但 Glide.js 再次负责并且界面正在偏移，因此幻灯片移动了一点并且与屏幕不匹配。

我正在使用 glidejs 向我的网页添加一个滑块，但我没有收到错误消息。下一个/上一个按钮不起作用，加上用鼠标滑动也无法控制滑块。你有什么办法解决这个问题吗？

//<--!html-->

//CSS

// javascript 启动滑块

我创建了一个新的 Rails 6 项目，并尝试通过 Webpack 安装第三方 JavaScript 库Glide.js。但是，我似乎错过了一个关键步骤，因为它不起作用。

到目前为止我所做的：

1. 使用纱线安装 Glide.js：yarn add @glidejs/glide
2. 在 /app/javascript/packs/application.js中需要Glide.js：

3. 在/app/views/layouts/application.html.erb添加javascript_pack_tag：

当我启动 rails 服务器并尝试在 Web 控制台中创建 Glide 对象时，我收到错误消息：

如何成功安装 Glide.js？