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

68

我创建了一个carouselwith Bootstrap 3.3，它可以在我的本地计算机上运行，但是当我将整个内容上传到正在将bootstrap js文件与其他文件一起编译到一个文件中的服务器上时，出现此错误：

Cannot read property 'offsetWidth' of undefined -有人面对过这个问题吗？

javascript jquery twitter-bootstrap

— een
source

1

您可以链接到出现错误的页面吗？还是可以将其放在jsFiddle中？

— 亚历克斯W

175

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

— 杰克·詹姆斯
source

是的，这就是解决方法:)谢谢！

— 2015年

5

如果您编译引导程序，则可以通过编辑以下行的carousel.js来修复它： $next[0].offsetWidth//强制回流更改为 if (typeof $next == 'object' && $next.length) $next[0].offsetWidth // force reflow

— fourgablesguy 2015年

3

就我而言，这既影响了活动课堂，也可能在其包含加载之前终止潜水加载

— damon

太棒了！谢谢男人

— Ashok Shah

@fourgablesguy嗨，我想知道您的意思是什么-编译引导程序吗？Bootstrap如何手动编译？您是说要建设整个项目吗？

— Ashish Goyal，

102

对于我来说，我换class='carousel-item'到class='item'喜欢这个

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

— 阳光明媚
source

5

“轮播项目”来自v4 alpha示例。因此，我将其保留在其中，但添加了“项目”，因此它也可以在v3中使用

— Rick Westera '16

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

— Dave Voyles

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

— Folusho Oladipo

2

我同时使用BootStrap 4和BootStrap 3（长话），所以添加项目和轮播项目对我来说解决了这个问题（没有一个人可以工作）。

— 史蒂夫·伯恩

使用pingendo.com当前正在使用的4 beta 1 ，并且不得不在轮播项目旁边添加项目，从而达到了成功的目的

— foamroll

8

删除页面加载中的``Carousal slide''类，并在使用jquery加载图像时动态添加它。

— 安纳普·谢蒂
source

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

— Hari Ram

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

— 安尼尔·库玛

1

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

— dgncn
source

0

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

— 塞里·哈夫里留克（Serhii Havryliuk）
source

-1

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

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

重命名为以下内容：

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

— 希娜·阿扎尔（Hina Azhar）
source