我在一个页面上有 3 个 Splide.Js 滑块，我想添加此处提到的进度条 - > https://splidejs.com/ 在滑块进度下：

到目前为止，这是我的代码（适用于幻灯片本身）：

我在哪里放置这段代码以使栏适用于每张幻灯片？我目前收到错误“无法读取 null 的属性（读取 'style'） ”

进度条码：

感谢您的任何提示

我刚刚使用 splide 制作了一个旋转木马，我只是按照我想要的方式制作了它。只剩下一个细节，它不起作用。我不想在开头显示主滑块，并且仅在用户单击任何缩略图时才开始显示它。我是这样实现的：

接着

但主滑块只能部分可见。也就是说，只会显示分页和箭头。无法显示所有内容，尤其是图像。

这是整个代码：

我在我的 vue 项目中使用 vue splide 并开玩笑进行测试。

当我尝试对导入 Splide 的组件运行测试时，我收到此错误：

我相信这与我的笑话配置和转换脚本有关吗？

在我的 jest.config.js 中：

在测试本身：

我不太明白正在转换或忽略什么，或者我需要在这里添加什么

node_modules/@splidejs/vue-splide/src/js/index.js 的内容为：

所以我猜这是错误所指的非模块导入。有谁知道如何为开玩笑的配置纠正这个问题？

我尝试了多个 transformIngorePatterns 但它们似乎不正确，因为我总是收到相同的错误：

但是，我还发现 Splide package.json 将引发错误的文件声明为模块：

在 node_modules/vue-splide/package.json 中：

我正在尝试将 Vue-Splide 添加到我的 Nuxt 项目中，在按照 Vue-Splide 文档安装插件并将其注册为 Nuxt 插件后出现错误Cannot use import statement outside a module。

nuxt.config.js

splide.client.js

template

转换 Vue-Splide后，我现在收到错误window is not defined，并且堆栈跟踪显示它正在发生node_modules\@splidejs\splide\dist\js\splide.js，我尝试用 包围 splide 标签<client-only></client-only>，但这似乎不起作用。

我在这里还缺少什么？

更新以包含我的依赖项

当使用 for 循环初始化滑块时，我试图让我的滑动进度条工作，如下所示。我不确定如何正确处理。滑块和进度条似乎初始化得很好，但是只有最后一个滑块在移动时会更新其进度。处理过 Splide 的人有什么想法吗？谢谢！

和 HTML：

我在使用 splide 视频扩展时遇到问题，当我尝试将它与 youtube 一起使用时，它不会加载视频，单击播放后只会显示黑屏。我已经从文档中复制了确切的示例，并将随机小狗图片作为 img，但它不起作用。

youtube 视频无法加载，但 Vimeo 视频可以正常工作。我该如何解决？

编辑：当提供这个文件（Liveserver / Codepen / Webstorm Live view）而不是静态 HTML 时，它似乎工作正常。我不确定这是什么原因。

我正在尝试将Splidejs集成到Grapesjs编辑器中。安装滑块时，我得到Uncaught Error: [splide] A track/list element is missing.

调试后，我意识到 Splide 没有找到正确安装所需的轨道或列表 HTML 元素。但是，它们存在于 Grapes 组件的 HTML 中。

Splide 没有找到它们的原因似乎与不同的 HTMLElement 基类型有关，导致我的元素无法识别。

下面的测试（Splide 3.6.9）返回false

在Chrome 开发工具控制台中进行调查时，乍一看__proto__评估的链看起来是正确的。instanceof然而，仔细观察表明它subject具有额外的__zone_symbol__onxxx属性。

这可以通过这两个参考来解释：

(1) https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/instanceof#instanceof_and_multiple_context_e.g._frames_or_windows

instanceof和多个上下文（例如框架或窗口）

不同的作用域有不同的执行环境。这意味着它们具有不同的内置函数（不同的全局对象、不同的构造函数等）。这可能会导致意想不到的结果。例如，[] instanceof window.frames[0].Array将返回false,

(2) https://grapesjs.com/docs/modules/Components-js.html#important-caveat

请记住，所有组件脚本都在画布的 iframe 内执行（隔离，就像您的最终模板一样），因此不是当前文档的一部分。

我怀疑我的 Splide 内容被 zone.js 增强了。因此我开始在 Angular 区域之外创建 Grapes 组件

但错误仍然存​​在。

您对我如何解决此问题有任何提示吗？

• 在我的托管 Grapes.js 的组件中完全禁用 zone.js
• 修改/修复 Splide 搜索（过滤）所需 HTML 元素的方式？
• 其他建议？

嗨开发者，

我将 splidejs 用于 vue 滑块组件。我不认为 splidejs 有问题。但是这里描述了一个问题。

问题

有一个滑块组件。我正在制作动态幻灯片。有两种方法。

情况1：

静止的 -

动态-- data () 选项中有一个数组。这里

结果：完美运行

案例2

*我在这里使用api。API 响应是 100% 好的。axios没有问题。*

屏幕截图中的 API 响应

api响应

案例 2 的结果：UI 中断。API 调用时滑块停止工作。

注意：

1. 问题与 splidejs 无关
2. 我正在使用 vue 3 cdn。
3. 所有像 axios、splidejs 这样的插件都是全局导入的。他们没有问题

我正在研究像这里这样的缩略图滑块：

https://splidejs.com/tutorials/thumbnail-slider/

在大屏幕上，拇指左对齐。我试图让他们居中。

见https://codepen.io/caplod/pen/ExboPyP

但随后第一个在小屏幕上被切断。

我怎样才能解决这个问题？

我正在通过他们的 CDN 使用最新版本的Splide（截至今天为 3.6.12）。

我的页面上有多个滑块，Splide 在桌面上运行良好。Chrome 中的响应模式也适用于任何尺寸。但是，当我使用真实的移动设备加载相同的页面时，无论我使用的是 Chrome 还是 Safari，所有的滑块都是隐藏的。我有一个默认配置，没有插件，我已经在多个设备上尝试过。

我在 Chrome 中检查了移动设备上的控制台，但没有看到任何警告或错误消息。我也已经检查过任何会导致这种情况的特定 CSS 样式。

如果我从 HTML 代码中删除 Splide 的容器，图像会再次出现在移动设备上。

我尝试使用 Codepen 重现该问题，但下面的示例实际上适用于移动设备！

https://codepen.io/bruno-lv-que/pen/vYWRbvz

Splide 在移动设备上是否有任何细节或已知问题？