javascript - 将 Revolution Slider 5+ 图层设置为静态图层

Question

我希望在所有幻灯片上的文本下方都有一个形状，以始终保持静止，而不是闪烁。

我知道Revolution Slider 有一个静态图层选项，但它不允许您将它放在其他幻灯片的图层之下，它总是在顶部。

我尝试在每张幻灯片中创建一个具有 0 个过渡的图层，但是当我将所有内容设置为 0 时，它就会消失。

我该怎么做： 1. 创建一个可以在其他图层下面分层的静态图层 2. 在幻灯片中设置我的图层上的过渡以消除过渡进出，使图层看起来是静态图层？

Answer 1

这是一个很好的问题，因为如果您不想在文本下方使用背景图像，您可能无法在第 5 次革命中完美地做到这一点。

这应该使用底部图层的静态/全局图层来处理，但 rev5 将始终覆盖您的 z-index（或您以这种方式尝试的任何其他内容），并且它将始终显示在顶部。所以这里什么都没有。

其他要做的事情是把这个层放在每张幻灯片上，总是在同一个位置，然后关闭那个层上的所有动画，这样他在每张幻灯片上的行为都是静态的。但是 rev5 尽管您定义了没有动画使用动画速度参数，并且该图层将再次闪烁。如果你把动画速度设为0，图层就会消失。为什么滑块的创建者可能也不知道。

我认为你唯一能做的就是让他看起来像你想要的那样，这并不完美，但也许可以接受。

所以在底部（静态）层点击上方菜单中的动画并选择无动画和无动画。由于您不能将动画速度设为 0，因此我们将动画速度设为 100，将动画速度设为 1000。通过这种方式，动画将足够长，以显示图层动画连续 - 即静态。但即使这样，图层也会轻微闪烁，但比以前少得多，所以效果可能是可以接受的。

您可以使用淡入而不是无动画进行播放，并且使用动画速度数字，诀窍是退出速度持续足够长的时间，以便下一张幻灯片的进入速度开始。

我希望这会有所帮助，我也希望 rev 5 的创作者能够解决这个问题。

Answer 2

我今天遇到了同样的问题，我不同意接受的答案，因为您可以使用 css 覆盖轻松更改静态图层的 z-index。

革命滑块有一个内置的自定义 css 编辑器，所以去你的滑块设置，滚动到底部并添加：

.tp-static-layers {
z-index: 0;
}

完成后，所有静态图层将出现在普通图层下方。

编辑

使用较新版本的 revslider，每个幻灯片<li>容器都有一个 z-index。试试下面的css。

.tp-static-layers {
  z-index: 1;
}
ul.tp-revslider-mainul > li {
  z-index: unset !important;
}

注意：未经过全面测试，这可能会干扰动画。