Swiper 是为 Elementor 中的每个旋转木马提供动力的 JavaScript 库:图像旋转木马、媒体旋转木马、 感言旋转木马, 环形旋转木马、以及每个第三方 元素轮播小部件 you’ve安装了,它不是元素器功能,它是元素器捆绑的一个开源滑块库。
Knowing that 改变了你调试一个坏转盘的方式,当滑块停止工作时,问题几乎从来都不是小部件,是 Swiper 在它的容器有宽度之前没有加载,没有初始化,或者初始化。
快速修复:插件更新后滑块停止工作
如果您因为工作轮播突然死亡而来到这里,请在阅读其他内容之前尝试一下:
- 打开您的缓存或优化插件。
- 查找 JavaScript 设置:组合 JS、延迟 JS、延迟 JS。
- 关闭所有三个。清除缓存。重新加载页面。
如果旋转木马回来,JS 优化就会破坏它,并且修复是排除而不是留下优化。精确的排除更低。
Swiper 实际执行的操作
3个嵌套的元素。一个容器,里面有一个包装纸,里面滑动。刷卡器读取容器的宽度,计算每张滑动的包装纸移动多少,并在包装纸上应用一个CSS变换。滑动件永远不会单独移动;整个条带在窗口下面滑动。
这就是为什么两类错误占主导地位:
剧本没有运行。 Nothing初始化,所以你看到所有的幻灯片堆叠或排成一排,没有交互,Swiper的CSS通常还在,所以看起来是半风格的,而不是明显的破碎。
测量时容器没有宽度。 Swiper 对零计算,所以滑块重叠,坐错尺寸,或者轨道跳跃,这就是选项卡和手风琴错误:隐藏面板内部的旋转木马在隐藏时测量自身。
打破元素旋转木马的五件事
1、JavaScript 组合和推迟
最常见的原因是很大的。
Swiper 必须在内联初始化代码运行之前定义。组合 JS 重新排序文件。延迟将执行推过内联调用。延迟 JS 会将库保留到用户交互,此时 init 已经启动并失败。
打开浏览器控制台。如果你看到 Swiper is not defined 或 Cannot read properties of undefined的,这是你的问题。
修复: 将滑动句柄排除在优化之外,而不是将其批发禁用。在页面优化 → JS 设置下的 LiteSpeed Cache 中添加:
swiper
elementor-frontend
jquery-coreLiteSpeed上人们错过的一件事:有单独的排除字段,并且 访客模式有自己的。如果您只填写主 JS Excluses 框,登录用户会看到一个正在工作的转盘,而已注销的访问者则不会,这正是测试中幸存下来的错误,因为您在测试时登录了。在访客模式字段中放置相同的排除项。
WP Rocket:文件优化 → 排除的 JavaScript 文件,加上延迟 JavaScript 执行下的相同字符串。自动优化:额外 → 从自动优化中排除脚本。
2、隐藏容器内的转盘
当面板初始化时,选项卡、手风琴或画布外面板中的旋转木马就会初始化 display: none。宽度读为零,从第一帧开始数学就错了,打开选项卡,你就会得到重叠的幻灯片或不会移动的轨道。
修复: 大多数小部件都会暴露一个“observer”设置。打开它,刷卡器会观察尺寸变化并重新计算。如果您的没有,请将转盘放在第一个选项卡中,该选项卡在加载时可见。
3、幻灯片过少的循环模式
Loop 的工作原理是克隆幻灯片来伪造环绕式,它至少需要每视图幻灯片数量的两倍才能有足够的克隆,每视图三下的四个幻灯片会产生可见的跳跃、空白间隙或中途停止的轨道。
修复: 添加幻灯片或关闭循环。没有设置可以使短循环平滑。
4、一页两个刷卡版本
Elementor捆绑一个版本;有些插件捆绑了自己的。两个都注册相同的全局。以加载秒为准,如果一个小部件是针对不同的API构建的,它就会坏,通常会出现一个不存在的方法的错误。
修复: 在控制台中,运行 Swiper.version.然后一次停用一个插件,直到它停止更改。行为良好的插件重复使用Elementor的副本,而不是寄出自己的。 旋转木马插件比较 注意哪些是这样做的。
5、懒装打滑块
Aggressive image lazy loading,尤其是在主题之上单独设置的 lazy-load 插件,可以让幻灯片图像在零高度上一直滚动到视图,除了它们从不滚动到视图,因为它们在水平轨道上,结果:空盒子的转盘。
修复: 从懒负载插件中排除旋转木马的图像类别,或者在图像上设置显式宽度和高度,以便框保留空间。 视频旋转木马 击中这个最严重,因为每张屏幕外幻灯片都带有播放器和图像。
如何检查 Swiper 是否已加载
30秒,它告诉你你有哪一半的问题。
- 用损坏的旋转木马打开页面。
- 打开浏览器控制台(F12,或右键 → 检查 → 控制台)。
- 类型
typeof Swiper然后按 Enter。
"function" 意味着加载了库,因此您的问题是初始化:查看隐藏的容器或循环设置。 "undefined" means它从未到达,原因就是js优化或者是链条早些时候失败的脚本,在控制台上向上滚动第一个红色错误,而不是最后一个;后面的错误通常是第一个的结果。
Elementor 中重要的刷卡设置
大多数小部件在轮播设置下暴露这些,有时带有不同的标签:
- 每个视图的幻灯片:有多少是可见的;这是分隔的一个设置 滑块上的旋转木马。设置每个断点,始终。
- 滑动滚动:每次点击预先多少。将此设置为每视图幻灯片,可为您提供页面式分页;将其设置为 1,可给人一种连续的感觉。
- 速度:标准过渡持续时间为 300 至 500 女士,3D 过渡持续时间较慢。
- 自动播放延迟:每张幻灯片暂停。设置为0,它就变成了a 帐篷这就是如何 徽标滑块小部件 通常配置。
- 循环:无限包裹。需要足够的幻灯片,如上。
- 自动高度:容器匹配最高的可见幻灯片,对于不均匀的文字很有用,而且它引入了一个高度动画,看起来很跳跃,所以值得测试而不是假设。
- 居中幻灯片:主动滑梯位于中心而不是向左齐平。需要覆盖流向右看。
这些出现在免费的地方 图片旋转木马小部件: 图像转盘演练 有面板屏幕截图。
您应该加载自己的刷卡器吗?
No,几乎在每种情况下。Elementor的副本已经出现在页面上,每当存在转盘小部件时,添加第二个小部件会导致上面的版本冲突。
Elementor 转盘小部件完全没有的页面上的自定义滑块是例外,那么 Elementor 的 Swiper 没有排队,你需要自己的。有条件地排队,只在那个模板上,所以你不会在其他地方重新引入冲突。
常见问题
Elementor 中的 Swiper 是什么?
Swiper是Elementor用于其所有转盘和滑块小部件的开源JavaScript滑块库,Elementor将其捆绑并每当页面上出现转盘小部件时将其排队。大多数第三方Elementor转盘插件使用相同的副本而不是运送自己的副本。
为什么我的 Elementor Swiper 滑块不起作用?
十分之九是从缓存插件进行 JavaScript 优化:组合、推迟或延迟 JS 对脚本进行重新排序,以便在 init 代码运行时不会定义 Swiper 关闭这三个并重新加载。如果滑块返回,请添加 swiper, elementor-frontend 並 jquery-core 到插件的 JS 排除,而不是让优化处于禁用状态。
如何修复“Swiper 未定义”?
库在初始化代码运行之前没有加载。从 JS 中排除在缓存插件中组合、延迟和延迟的刷卡器。在 LiteSpeed 上,将排除项添加到访客模式字段以及主字段,否则它适用于登录用户和访问者休息。
Elementor 使用哪个 Swiper 版本?
Elementor 版本而改变,打开控制台并运行即可在任何带有转盘的页面上进行检查 Swiper.version。如果返回的数字与您预期的不同,则一个插件正在加载自己的副本并覆盖 Elementor 的副本。
为什么我的幻灯片重叠或堆叠在一起?
Swiper 在零宽度下测量容器,通常是因为旋转木马位于页面加载时隐藏的选项卡、手风琴或弹出窗口内。启用观察者设置,以便在容器可见时重新计算,或者将旋转木马移动到默认打开的面板。
为什么我的旋转木马在登录时有效,但不适用于访客?
Caching。logged-in用户通常会绕过缓存, 得到未优化的脚本, 因此滑块工作。访问者得到缓存, 组合和延迟版本, 它会坏。在私有窗口中进行测试, 并在缓存插件中检查是否有单独的来宾或未经身份验证的排除列表。
如果还坏的话
按此顺序工作:控制台首先检查 (typeof Swiper的),然后缓存排除,然后在分期副本中一次停用一个加元,那个序列几乎在十分钟内找到每个案例的原因。
通过进口的设计 小部件生成器 使用与库存小部件相同的 Swiper 构建,因此这些修复程序也适用于它们。 定价页面 涵盖二十人中的哪一个需要许可证。
如果您想从一些众所周知的东西开始,那么每个旋转木马小部件都可以在 元素轮播小部件 页面附带记录的排除安全脚本句柄,并且 环形旋转木马指南 cover 相同问题的动态查询变体,如果你是挑小部件而不是修复小部件, 免费旋转木马小部件故障 和 二十个滑块模板 是两个起点。
