引导:“无法读取未定义的属性'偏移宽度'”轮播错误
Bootstrap: "Cannot read property 'offsetWidth' of undefined" error with carousel
我在轮播中使用多个引导程序:
<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>
但是,我在 JavaScript 中收到一个错误:
未我捕获的类型错误:无法读取未定义的属性"偏移宽度"
发现了一些类似的问题(1,2),但它们似乎不适用于我。
尽管存在错误,但轮播功能没有问题,但我更想知道导致错误的原因并修复它们。
任何建议都会很棒。
我发现这个问题在谷歌上搜索同样的问题。我有三个不同的轮播,它们显示在同一个容器div 元素中。我使用 jQuery.toggle() 隐藏了其中两个,并且当时只显示其中一个。用户可以使用切换按钮在不同的轮播之间切换。
虽然这个问题没有解决我的问题,但我想我会分享我的解决方案,让下一个遇到这个问题的人。显然,您必须在所有三个轮播上设置"活动"类,无论它们是否可见。我最终得到了以下标记(基本上)。
<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>
重点是,尽管 ID 为"carousel2"和"carousel3"的div 的显示属性都设置为"none",但它们仍然需要一个具有类"active"(以及相应的导航/轮播指示器)的元素。希望它对某人有所帮助。
相关文章:
- webRTC错误未定义配置
- gmaps4rails 2.4.6未捕获引用错误:未定义Gmaps
- 未捕获引用错误:未定义validateform
- 为什么我会出现此错误"未捕获引用错误:未定义标题;
- Sitecore”;未捕获引用错误:未定义MultilistWithSearch;
- Wordpress:未捕获引用错误:未定义速度
- Node.js引用错误:未定义类名
- Replace()产生“;未捕获的类型错误:未定义的不是函数“;当与零一起使用时
- 错误-未定义easeInBounce
- 未捕获的引用错误:未定义<映射键>
- 未捕获的类型错误:未定义不是上的函数.GetElementByID
- Javascript错误:未捕获引用错误:未定义编辑
- javascript onchange取消绑定错误|未定义
- requirejs优化器错误:未定义窗口
- 未捕获引用错误:未定义PrintThisPage
- JSHint 错误:未定义我的应用程序 (W117)
- 当我编写脚本时,它显示引用错误:未定义宽度
- socket.io - 引用错误:未定义 io
- 反应.js:未捕获类型错误:未定义不是一个函数
- 出现“未捕获的类型错误:未定义不是函数”控制台错误