问题标签 [glidejs]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
555 浏览

reactjs - 每当活动幻灯片发生变化时,是否有 glideJS 事件?

我一直在尝试glidejs在我的反应项目中使用,我希望在活动幻灯片更改后运行一个函数。我尝试使用以下方法设置事件侦听器:

这样该函数被正确调用,但是当我滑动屏幕时触发的事件数量会产生大量延迟(向左滑动一个项目会触发此事件侦听器数千次)。我在文档中搜索了一个表明活动幻灯片已更改为另一张幻灯片的事件,但我似乎找不到任何符合我要求的事件。我已经尝试过移动事件,但这有同样的问题。

是否有任何我可以使用的事件表明活动幻灯片已更改?

0 投票
1 回答
1045 浏览

carousel - 如何在 nuxt 上使用 vue-glide-js 事件并在最后一张上加载更多幻灯片

我对所有这些都是新手,所以我需要帮助。首先是 vue-glide-js 事件是如何工作的。它的文档只是在没有示例的情况下列出了它们。其次,更重要的是,我想在我的轮播结束时发送一个 axios 请求并加载更多项目。我无法处理事件,因此使用了活动幻灯片并观看了它,最后一张幻灯片发送并更新了我的数据,但幻灯片仍显示前一张。我该怎么办?

这是我的代码的简化版本

如您所见,我手动向数组中添加了更多项目,但 glide 仍显示 7 个项目。我知道这与安装有关,但不知道该怎么做。

还有一件事情。如果有更好的轮播支持 rtl 和断点(不同宽度的每个视图的项目),我很高兴知道。坦克

0 投票
0 回答
41 浏览

javascript - 无法让 glidejs 使用 pug 模板

我已经在我的项目中导入了三个文件(核心、主题和 glidejs)

但布局似乎很奇怪: 奇怪的布局

HTML:

并且按钮上的文字没有出现。

此外,我尝试通过以下方式导入节点包:

但是该链接不像文档中所说的那样工作(href="node_modules/@glidejs/glide/dist/css/glide.core.min.css"),并且该包未添加到我的 node_modules 目录中。

谢谢。

在@Sean 回复后编辑但现在我看不到箭头。

0 投票
1 回答
418 浏览

javascript - 通过 jQuery 设置图像源时,glide.js 中的最终图像不可见

在为滑动轮播创建幻灯片并在 HTML 中分配源时,轮播按预期工作。

但是,当我尝试通过 jQuery 更改源时,前两个图像按预期显示,但最后一个图像没有出现。相反,它在轮播中显示为空白图像。

我也用 4 张图片尝试过同样的场景,在这种情况下,第三张图片会出现,但第四张不会出现。

0 投票
1 回答
465 浏览

javascript - Glide JS不显示图像

我在 VueJS 项目中使用 Glide JS carousel 来显示一些图像(至少 3 个),但是发生的情况是只显示了三个图像中的第一个,而另外两个不显示任何东西,即使<img/>标签具有图像的正确src URL。我已经尝试调试了几个小时,但找不到任何可能导致此错误的东西。

0 投票
1 回答
318 浏览

javascript - 为什么 GlideJS 不在 IE11 中设置事件监听器?

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

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

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

我的问题是:

  1. 为什么事件不附加(绑定/添加,我不太确定 glide js 中的事件有什么类型的动作)到 DOM 元素?
  2. 为什么样式会因为我所做的断点而疯狂,所以出现的幻灯片不超过 1 张?

GlideJS github 假设它在 edge 和 IE11 上都运行良好,那么我错在哪里?

代码:通过module导入,然后在webpack中通过babel编译

这是它在 Chrome 中的外观: Chrome 视图

以及它在 IE11 中的外观:

IE11_view

0 投票
1 回答
540 浏览

javascript - Glide.js 有反应问题

这是我第一次在这里问。我使用 Glide.js 和 react 来制作轮播。当我单击箭头按钮时,它没有响应。

任何建议都会有很大帮助。谢谢!我的代码如下:

0 投票
1 回答
584 浏览

javascript - Glide.js 动态追加来自 Json 的内容

我正在尝试从 JSON 动态地将内容添加到滑块。

内容似乎已加载,但滑块无法正常工作

0 投票
1 回答
303 浏览

javascript - 如何删除 glide.js 底部的空格?

谁能帮我删除图像或滑块底部的空格?

图片预览:

图像预览

项目代码链接http://playcode.io/661392

由于 CDN 不起作用,我已经下载并使用了 glide.core.min.css 和 glide.theme.min.css 的 css 文件

0 投票
1 回答
82 浏览

javascript - 在 Glidejs 中轮播设置为自动播放时的触发功能

我有一个 GlideJS 轮播,我试图handleAnimation在每张幻灯片激活后调用我的函数。

如果我单击它,它会起作用,但是当轮播处于自动播放状态时,我不知道如何让它运行。

我应该使用 GlideJS 的事件处理程序之一吗?感谢您的任何建议!