Bootstrap Carousel：未捕获的类型错误：无法读取未定义的属性“offsetWidth”

Question

我似乎有一个 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>');
  }

等等...

我已确保第一个轮播项目处于活动状态，这是其他一些类似帖子的解决方案。 真正让我困惑的是它间歇性地工作。 我曾想过与另一个开源轮播一起工作，但现在我渴望了解这个问题，而不是希望看到它得到修复。

有什么想法吗？

Answer 1

Bootstrap Carousel 的两个项目集

1.去掉data-ride="carousel"属性修复JS错误

文档解释了：

data-ride="carousel"属性用于在页面加载时将轮播标记为动画

但是当您加载页面时，您的轮播仍然是空的。 脚本无法找到动画项目并发生错误。

因此，删除此属性并在其中添加内容后运行轮播。

2. 请检查我的代码。 这是你想要达到的吗？

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>

Answer 2

对我来说，这是一张课堂幻灯片。 显然，就像数据骑行一样，轮播会在某些时间间隔内搜索下一张幻灯片。 当我打开轮播时，我正在添加班级幻灯片并将项目动态添加到轮播中。 问题是，当我关闭轮播时，我删除了所有项目，但没有删除幻灯片类，因此轮播试图在空轮播中找到幻灯片。

Answer 3

在页面上遇到两个轮播非常相似的问题。

我收到了 carousel.js 错误：

无法读取 null 的属性“间隔”

在切换到第二个之后。 在检查插件后，我发现了由内部代码片段引起的错误

if (this._config.pause === 'hover') {
...
}

（事实证明hover是默认值，在我的情况下这是不可取的）这让我找到了解决方案。

所以我们只需要在使用插件方法调用初始化 carousel 时将pause设置为false

$(car1).carousel('dispose')
$(car2).carousel({interval: false, ride: false, pause: false})

从那以后没有看到任何错误。