javascript Bootstrap：“无法读取未定义的属性‘offsetWidth’”轮播错误
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30845815/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap: "Cannot read property 'offsetWidth' of undefined" error with carousel
提问by Wayne Smallman
I'm using multiple in carousels Bootstrap:
我在旋转木马 Bootstrap 中使用多个：
<div id="carousel-586" class="carousel slide carousel-block" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel-586" data-slide-to="0" class="active"></li>
<li data-target="#carousel-586" data-slide-to="1"></li>
<li data-target="#carousel-586" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="..." alt="...">
</div>
<div class="item">
<img src="..." alt="...">
</div>
<div class="item">
<img src="..." alt="...">
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-586" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-586" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
However, I'm receiving an error in JavaScript:
但是，我在 JavaScript 中收到错误消息：
Uncaught TypeError: Cannot read property 'offsetWidth' of undefined
未捕获的类型错误：无法读取未定义的属性“offsetWidth”
I've found a few similar problems (1, 2), but they don't appear applicable to me.
我发现了一些类似的问题 ( 1, 2)，但它们似乎不适用于我。
Despite the errors the carousel functions without problems, but I'd prefer to know what's causing the errors and fix them.
尽管有错误，轮播功能没有问题，但我更想知道是什么导致了错误并修复它们。
Any suggestions would be great.
任何建议都会很棒。
回答by mb897038
I found this question googling for the same issue. I have three different carousels that are displayed in the same container div element. I keep two of them hidden using jQuery.toggle() and only shows one of them at the time. The user can switch between the different carousels using a toggle button.
我发现这个问题在谷歌上搜索同样的问题。我在同一个容器 div 元素中显示了三个不同的轮播。我使用 jQuery.toggle() 隐藏其中的两个，并且当时只显示其中一个。用户可以使用切换按钮在不同的轮播之间切换。
Though this question did not solve my problem, I thought I'd share my solution for the next person to encounter this problem. Apparently, you must have the class "active" set on all three carousels , independent of whether they are visible or not. I ended up with the following markup (essentially).
虽然这个问题没有解决我的问题，但我想我会为下一个遇到这个问题的人分享我的解决方案。显然，您必须在所有三个 carousels 上设置“active”类，而不管它们是否可见。我最终得到了以下标记（基本上）。
<div id="carousel-container">
<div id="carousel1" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li class="active" data-target="#carousel1" data-slide-to="1"></li>
<li data-target="#carousel1" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">...</div>
<div class="item">...</div>
</div>
</div>
<div id="carousel2" class="carousel slide" data-ride="carousel" style="display:none;">
<ol class="carousel-indicators">
<li class="active" data-target="#carousel2" data-slide-to="1"></li>
<li data-target="#carousel2" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">...</div>
<div class="item">...</div>
</div>
</div>
<div id="carousel3" class="carousel slide" data-ride="carousel" style="display:none;">
<ol class="carousel-indicators">
<li class="active" data-target="#carousel3" data-slide-to="1"></li>
<li data-target="#carousel3" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">...</div>
<div class="item">...</div>
</div>
</div>
</div>
Point being is that despite that the divs with id "carousel2" and "carousel3" both has their display property set to "none", they still need to have an element with the class "active" (and corresponding navigation/carousel indicator). Hope it helps someone.
重点是，尽管 ID 为“carousel2”和“carousel3”的 div 的显示属性都设置为“none”，但它们仍然需要具有类“active”（以及相应的导航/轮播指示器）的元素。希望它可以帮助某人。
