Bootstrap Carousel：未捕获TypeError：无法读取未定义的属性'offsetWidth'

Question

我似乎有一个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文件会查找click事件，并根据点击的内容在轮播中填充图片：

  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

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="//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();
})

@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>