- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我似乎遇到了一个 Bootstrap Carousel 问题,该问题对于发布的其他问题/修复是独一无二的。这个很奇怪。
控制台错误:
Uncaught TypeError: Cannot read property 'offsetWidth' of undefined
at c.slide (https://www.somewebsite.com/js/bootstrap.min.js:6:6890)
at c.next (https://www.somewebsite.com/js/bootstrap.min.js:6:6128)
at e (https://www.nastassiafreeman.com/js/jquery.js:2:3957)
三、错误是如何触发的:
单击图像后,会弹出一个允许导航的模态/旋转木马。单击箭头时,会触发错误,无法继续下一张图片。
奇怪的事实:
当您刷新页面并重试时,成功了。
我的 html 设置为只有 1 个空轮播和许多图像,请注意轮播是空的:
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
然后我的 js 文件查找点击事件,并根据点击的内容用图像填充轮播:
if($(this).attr('id') == 'fall_A'){
$('.item').remove();
$( '.carousel-inner' ).append('<div class="item active"><img id="img1" src="img/fall_A1.png" alt="..."><div class="carousel-caption"></div></div>');
$('.item').after('<div class="item"><img id="img2" src="img/fall_A2.png" alt="..."><div class="carousel-caption"></div></div>');
$('.item').last().after('<div class="item"><img id="img3" src="img/fall_A3.png" alt="..."><div class="carousel-caption"></div></div>');
}
else if($(this).attr('id') == 'fall_B'){
$('.item').remove();
$( '.carousel-inner' ).append('<div class="item active"><img id="img1" src="img/fall_B1.png" alt="..."><div class="carousel-caption"></div></div>');
$('.item').after('<div class="item"><img id="img2" src="img/fall_B2.png" alt="..."><div class="carousel-caption"></div></div>');
$('.item').last().after('<div class="item"><img id="img3" src="img/fall_B3.png" alt="..."><div class="carousel-caption"></div></div>');
}
等等……
我已确保第一个轮播项目处于事件状态,这是对其他一些类似帖子的解决方案。真正让我感到困惑的是它间歇性地工作。我曾想过只使用另一个开源轮播,但现在我对理解的渴望让我更愿意解决这个问题,而不是希望看到它得到修复。
有什么想法吗?
最佳答案
data-ride="carousel"
属性修复 JS 错误The
data-ride="carousel"
attribute is used to mark a carousel as animating starting at page load
但是当您加载页面时,您的轮播仍然是空的。脚本找不到动画的项目并发生错误。
因此,删除此属性并在其中添加一些内容后运行轮播。
http://codepen.io/glebkema/pen/LbmPoX
var selectCarousel = $('#carousel-1');
var selectInner = selectCarousel.find('.carousel-inner');
$('#btn-1').click( function() {
selectInner.children('.item').remove();
selectInner.append('<div class="item active"><img src="https://via.placeholder.com/900x300/c69/f9c/?text=1" alt=""></div>');
selectInner.append('<div class="item"><img src="https://via.placeholder.com/900x300/9c6/cf9/?text=2" alt=""></div>');
selectInner.append('<div class="item"><img src="https://via.placeholder.com/900x300/69c/9cf/?text=3" alt=""></div>');
selectCarousel.carousel();
})
$('#btn-2').click( function() {
selectInner.children('.item').remove();
selectInner.append('<div class="item active"><img src="https://via.placeholder.com/900x300/c69/f9c/?text=4" alt=""></div>');
selectInner.append('<div class="item"><img src="https://via.placeholder.com/900x300/9c6/cf9/?text=5" alt=""></div>');
selectInner.append('<div class="item"><img src="https://via.placeholder.com/900x300/69c/9cf/?text=6" alt=""></div>');
selectCarousel.carousel();
})
@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
.btn {
margin: 15px;
}
.carousel-inner img {
width: 100%;
}
<div class="container">
<button id="btn-1" type="button" class="btn btn-primary btn-lg">Items form 1 to 3</button>
<button id="btn-2" type="button" class="btn btn-primary btn-lg">Items form 4 to 6</button>
<div id="carousel-1" class="carousel slide">
<div class="carousel-inner" role="listbox">
</div>
<a href="#carousel-1" class="left carousel-control" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span></a>
<a href="#carousel-1" class="right carousel-control" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span></a>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
关于javascript - 引导轮播 : Uncaught TypeError: Cannot read property 'offsetWidth' of undefined,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40982122/
我只是有一个更琐碎的问题。 为什么undefined == undefined 返回true,而undefined >= undefined 为false? undefined 等于 undefine
用PHP 7.2编写套接字服务器。根据Firefox 60中的“网络”选项卡,服务器的一些HTTP响应的第一行随机变为undefined undefined undefined。因此,我尝试记录套接字
在 JavaScript 中这是真的: undefined == undefined 但这是错误的: undefined <= undefined 起初我以为<=运算符包含第一个,但我猜它试图将其转换
在回答这个问题 (Difference between [Object, Object] and Array(2)) 时,我在 JavaScript 数组中遇到了一些我以前不知道的东西(具有讽刺意味的
来自https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/of , Note: thi
我正在运行 PHP 脚本并继续收到如下错误: Notice: Undefined variable: my_variable_name in C:\wamp\www\mypath\index.php
我正在运行 PHP 脚本并继续收到如下错误: Notice: Undefined variable: my_variable_name in C:\wamp\www\mypath\index.php
当我添加 到我的 PrimeFaces Mobile 页面,然后我在服务器日志中收到以下警告 WARNING: JSF1064: Unable to find or serve resource, u
我正在运行 PHP 脚本并继续收到如下错误: Notice: Undefined variable: my_variable_name in C:\wamp\www\mypath\index.php
我正在运行 PHP 脚本并继续收到如下错误: Notice: Undefined variable: my_variable_name in C:\wamp\www\mypath\index.php
我正在运行 PHP 脚本并继续收到如下错误: Notice: Undefined variable: my_variable_name in C:\wamp\www\mypath\index.php
我正在运行 PHP 脚本并继续收到如下错误: Notice: Undefined variable: my_variable_name in C:\wamp\www\mypath\index.php
我正在运行 PHP 脚本并继续收到如下错误: Notice: Undefined variable: my_variable_name in C:\wamp\www\mypath\index.php
我正在运行 PHP 脚本并继续收到如下错误: Notice: Undefined variable: my_variable_name in C:\wamp\www\mypath\index.php
我正在运行 PHP 脚本并继续收到如下错误: Notice: Undefined variable: my_variable_name in C:\wamp\www\mypath\index.php
我正在运行 PHP 脚本并继续收到如下错误: Notice: Undefined variable: my_variable_name in C:\wamp\www\mypath\index.php
我正在运行 PHP 脚本并继续收到如下错误: Notice: Undefined variable: my_variable_name in C:\wamp\www\mypath\index.php
我正在运行 PHP 脚本并继续收到如下错误: Notice: Undefined variable: my_variable_name in C:\wamp\www\mypath\index.php
我正在运行 PHP 脚本并继续收到如下错误: Notice: Undefined variable: my_variable_name in C:\wamp\www\mypath\index.php
我正在运行 PHP 脚本并继续收到如下错误: Notice: Undefined variable: my_variable_name in C:\wamp\www\mypath\index.php
我是一名优秀的程序员,十分优秀!