革命滑块 - “无效的左补间值：NaN”

Posted 2023-05-09

【中文标题】革命滑块 - “无效的左补间值：NaN”

【英文标题】：Revolution Slider - "Invalid left Tween Value: NaN"

【发布时间】：2017-03-03 22:36:37

【问题描述】：

我在一个项目中使用了来自 wrapbootstrap 的主题，并且我在滑块上得到一个 Not a number 值，这会导致网站速度出现一些小的性能问题。

这里是主题的链接： http://themes.iamabdus.com/bigbag/1.0/index.html

请查看 chrome 控制台错误：

无效的左补间值：NaN

有谁知道如何解决这个问题？将不胜感激，即使是快速修复/解决方法。

【问题讨论】：

同样的问题

是的，我也是。由于革命滑块，它来自 ThemePunch Slider Revolution。我认为这可能是由于 dom 中存在一个滑块，但不再出现在页面上 - 所以 ThemePunch 无法确定它应该滑到哪里。

在 Angular 2 网站中面临同样的问题。

与 angular2 有同样的问题。谁能告诉我解决办法？

有人解决了吗？请帮帮我

【参考方案1】：

我在调试器parseFloat(RegExp.$1) / 100 中看到了这一行，看起来它可能是导致错误的原因。 RegExp.$1-$9:

此功能是非标准的，不在标准轨道上。不要在面向 Web 的生产站点上使用它：它不适用于每个用户。实现之间也可能存在很大的不兼容性，并且行为可能会在未来发生变化。

我会尝试修改这些表达式，看看是否有帮助。

【讨论】：

这行 parseFloat(RegExp.$1) / 100 应该做什么？由于我的网站将投入生产，我想使用革命滑块。

【参考方案2】：

我遇到了同样的问题并找到了解决方案。 在您的横幅 html 代码中，您有四个 div，例如：

        <div class="tp-caption rs-caption-1 sft start"
             data-hoffset="0"
             data-x="370"
             data-y="54"
             data-speed="800"
             data-start="1500"
             data-easing="Back.easeInOut"
             data-endspeed="300">
              ...
        </div>

        <div class="tp-caption rs-caption-2 sft"
             data-hoffset="0"
             data-y="119"
             data-speed="800"
             data-start="2000"
             data-easing="Back.easeInOut"
             data-endspeed="300">
            ...
        </div>

        <div class="tp-caption rs-caption-3 sft"
             data-hoffset="0"
             data-y="185"
             data-speed="1000"
             data-start="3000"
             data-easing="Power4.easeOut"
             data-endspeed="300"
             data-endeasing="Power1.easeIn"
             data-captionhidden="off">
             ...
        </div>
        <div class="tp-caption rs-caption-4 sft"
             data-hoffset="0"
             data-y="320"
             data-speed="800"
             data-start="3500"
             data-easing="Power4.easeOut"
             data-endspeed="300"
             data-endeasing="Power1.easeIn"
             data-captionhidden="off">
          ...
        </div>

要修复此错误，只需将data-x="0" 添加到最后三个元素中即可。

【参考方案3】：

我也遇到了 wrapbootstrap 主题的相同错误，我进一步查看了 jedison 的评论，果然我的应用就是这种情况。

当我退出我的 ionic 应用程序时，我会清除我的页面。但是，revolution init 函数仍在被调用，这会引发错误。

对我有用的解决方案是我将这一行放在我的注销功能中，

jQuery('#rev-slider').revpause();

然后在登录时，所有页面都被重新加载，带有一个新的 rev 滑块和它的 init 函数。

【参考方案4】：

如果您修改了旋转滑块的标题样式，则会出现此错误。 因为它破坏了动画引擎。例如

.big_white 
  left: 0 !important;
  bottom: 0 !important;
  width: 100%;
  padding-bottom: 10px;
  ...

你必须删除css的左值