我似乎有一个Bootstrap Carousel问题,该问题对于发布的其他问题/修复是唯一的。这个很奇怪。
首先是包含错误的网站:nastassiafreeman.com
其次,控制台错误:
Uncaught TypeError: Cannot read property 'offsetWidth' of undefined
at c.slide (https://www.nastassiafreeman.com/js/bootstrap.min.js:6:6890)
at c.next (https://www.nastassiafreeman.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>');
}
依旧......
我已确保第一个轮播项目处于活动状态,这是其他类似帖子的解决方案。让我感到困惑的是它间歇性地工作。我曾经想过要和另一个开源转盘一起工作,但是现在我对这个问题的理解让我更加努力解决这个问题,而不是希望看到它固定不变。
有什么想法吗?
答案 0 :(得分:4)
data-ride="carousel"
属性以修复JS错误
data-ride="carousel"
属性用于将轮播标记为从页面加载开始的动画
但是当你加载页面时,你的轮播仍然是空的。脚本无法找到动画的项目并发生错误。
因此,删除此属性并在其中添加内容后运行轮播。
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="//placehold.it/900x300/c69/f9c/?text=1" alt=""></div>');
selectInner.append('<div class="item"><img src="//placehold.it/900x300/9c6/cf9/?text=2" alt=""></div>');
selectInner.append('<div class="item"><img src="//placehold.it/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="//placehold.it/900x300/c69/f9c/?text=4" alt=""></div>');
selectInner.append('<div class="item"><img src="//placehold.it/900x300/9c6/cf9/?text=5" alt=""></div>');
selectInner.append('<div class="item"><img src="//placehold.it/900x300/69c/9cf/?text=6" alt=""></div>');
selectCarousel.carousel();
})
&#13;
@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
.btn {
margin: 15px;
}
.carousel-inner img {
width: 100%;
}
&#13;
<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>
&#13;
答案 1 :(得分:0)
在页面上有两个轮播时遇到了非常相似的问题。
我在carousel.js中收到错误:
无法读取null的属性'interval'
在切换到第二个之后。检查插件后,我发现了由内部代码片段引起的错误
if (this._config.pause === 'hover') {
...
}
(事实证明hover
是默认值,在我看来,这是不希望的),这使我想到了解决方案。
因此,在使用插件方法调用初始化轮播时,我们只需要将pause
设置为false
$(car1).carousel('dispose')
$(car2).carousel({interval: false, ride: false, pause: false})
从那以后没有看到任何错误。
答案 2 :(得分:0)
对我来说,这是一张课堂幻灯片。显然,就像数据骑乘一样,轮播会在一定时间间隔内搜索下一张幻灯片。当我打开转盘时,我是在动态地将类幻灯片添加到转盘中。问题是,当我关闭轮播时,我删除了所有项目,但没有删除幻灯片类,因此轮播试图在空的轮播中查找幻灯片。