使用引导轮播脚本无法读取未定义的属性“offsetWidth”

Posted 2023-05-08

【中文标题】使用引导轮播脚本无法读取未定义的属性“offsetWidth”

【英文标题】：Getting Cannot read property 'offsetWidth' of undefined with bootstrap carousel script

【发布时间】：2015-05-15 16:12:21

【问题描述】：

我用Bootstrap 3.3 创建了一个carousel，它可以在我的本地机器上运行，但是当我将整个东西上传到服务器上，其中引导js 文件与单个文件中的其他文件一起编译时，我得到了这个错误：

Cannot read property 'offsetWidth' of undefined - 有人遇到过这个问题吗？是否有任何已知的解决方案？

【问题讨论】：

你能链接到有错误的页面吗？或者你可以把它放在 jsFiddle 中吗？

【参考方案1】：

对我来说，这是因为我没有在任何幻灯片上设置 active 类。

【讨论】：

是的，这就是修复 :) 谢谢！

如果你编译 bootstrap，你可以通过编辑 carousel.js 来修复它 $next[0].offsetWidth // force reflow 更改为 if (typeof $next == 'object' && $next.length) $next[0].offsetWidth // force reflow

在我的情况下会影响活动类，而且它也可能会在包含加载之前导致问题潜水负载

太棒了！谢谢人

@fourgablesguy 嗨，我可以知道你的意思是什么 - 编译引导程序？如何手动编译引导程序？你的意思是构建整个项目吗？

【参考方案2】：

对于我来说，我将class='carousel-item' 更改为class='item' 就像这样

<div class="item">
    <img class="img-responsive" src="..." >
</div>

【讨论】：

'carousel-item' 来自 v4 alpha 示例。出于这个原因，我把它留在里面，但添加了“项目”，所以它也可以在 v3 中使用

也为我工作。不知道为什么。

非常感谢！在为这个问题苦恼了一个多小时后，这也解决了我的问题。

我同时使用 BootStrap 4 和 3（长篇大论），因此添加 item 和 carousel-item 解决了我的问题（单独一个都不起作用）。

使用 pingendo.com 当前使用的 4 beta 1，并且必须在 carousel-item 旁边添加项目

【参考方案3】：

在页面加载时删除“Carousal slide”类并在使用 jquery 加载图像时动态添加它。这对我来说是固定的

【讨论】：

我正在 jquery 中动态创建整个轮播 html 内容，但仍然出现相同的错误

请注意，我们需要使用 .carousel() 方法初始化轮播。

【参考方案4】：

我遇到了同样的错误。因为我使用了 v4 alpha 类名称，例如 carousel-control-next 当我使用 v3 进行更改时，问题解决了。

【参考方案5】：

我遇到了同样的错误，但在我的情况下，我将轮播项目的类名写为 .carousel-item，而 bootstrap.css 指的是 .item。 所以错误解决了。 carosel-item 重命名为 item

<div class="carousel-item active"></div>

重命名为：

<div class="item active"></div>

【参考方案6】：

“更改为 if (typeof $next == 'object' && $next.length) $next[0].offsetWidth” - 没有帮助。 如果您将 Bootstrap 3 转换为 php（用于 WordPress 主题），则在添加 WP_Query ($loop = new WP_Query( $args );) 时插入 $count = 0;。并且在 endwhile 之前的结尾；添加 $count++;.

【参考方案7】：

如果您使用的是编译后的引导程序，修复它的方法之一是在该行之前编辑 bootstrap.min.js

$next[0].offsetWidth 

强制回流更改为

if (typeof $next == 'object' && $next.length) $next[0].offsetWidth // force reflow