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

Question

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

The console error:

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)

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?

Solution 1

Two Item Sets for Bootstrap Carousel

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

Solution 2

For me it was a class slide. Apparently, just like data-ride, carousel searches for the next slide on some intervals of time. When I was opening a carousel, I was adding the class slide & adding items into the carousel dynamically. The problem was, when I closed my carousel, I removed all items, but din't remove the slide class, so the carousel was trying to find slides in empty carousel.