Bootstrap Carousel: Uncaught TypeError: Cannot read property 'offsetWidth' of undefined

问题

I seem to be having a Bootstrap Carousel issue unique to the other issues/fixes posted. This one is strange.

Firstly the website containing the bug: nastassiafreeman.com

Second, the console error:

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)

Third, how the error is triggered:

Upon clicking an image, a modal/carousel pops up that allows for navigation. When clicking the arrow, the error is triggered and you cannot continue to the next image.

Strange fact:

When you refresh the page and try again, it works.

My html is set up to where I have only 1 empty carousel and many images, notice the carousel is empty:

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

my js file then looks for a click event, and populates the carousel with images based on what was clicked:

  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>');
  }

and so on...

I have ensured that the first carousel item is active, which was the solution to some other similar posts. What really confuses me is that it works intermittently. I've thought to just work with another open source carousel, but now my craving to understand has got me working on this problem more than the desire to see it fixed.

Any thoughts?

回答1:

1. Remove the data-ride="carousel" attribute to fix JS error

The documentation explains:

The data-ride="carousel" attribute is used to mark a carousel as animating starting at page load

But your carousel is still empty when you load the page. The script can not find the items for the animation and an error occurs.

Therefore, remove this attribute and run the carousel after adding something inside it.

2. Please check my code. Is it what you want to achieve?

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>

回答2:

Run into the very similar issue with two carousels on a page.

I have received error with carousel.js:

Cannot read property 'interval' of null'

right after switching to a second one. After inspecting plugin i have discovered the error caused by code fragment inside

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

(as it turned out hover is default value and in my case it is undesirable) which leads me to the solution.

So we just have to set pause to false when initializing carousel with plugin method calls

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

Since then haven't seen any errors.

来源：https://stackoverflow.com/questions/40982122/bootstrap-carousel-uncaught-typeerror-cannot-read-property-offsetwidth-of-un