Bootstrap Carousel: Uncaught TypeError: Cannot read property 'offsetWidth' of undefined
<p>I seem to be having a Bootstrap Carousel issue unique to the other issues/fixes posted. This one is strange.</p>
<p>The console error:</p>
<pre><code>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)
</code></pre>
<p>Third, how the error is triggered:</p>
<p>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.</p>
<p>Strange fact:</p>
<p>When you refresh the page and try again, <em>it works</em>.</p>
<p>My html is set up to where I have only 1 empty carousel and many images, notice the carousel is empty:</p>
<pre><code>    &lt;div id=&quot;carousel-example-generic&quot; class=&quot;carousel slide&quot; data-ride=&quot;carousel&quot;&gt;

    &lt;!-- Wrapper for slides --&gt;
    &lt;div class=&quot;carousel-inner&quot; role=&quot;listbox&quot;&gt;



    &lt;/div&gt;

    &lt;!-- Controls --&gt;
    &lt;a class=&quot;left carousel-control&quot; href=&quot;#carousel-example-generic&quot; role=&quot;button&quot; data-slide=&quot;prev&quot;&gt;
      &lt;span class=&quot;glyphicon glyphicon-chevron-left&quot; aria-hidden=&quot;true&quot;&gt;&lt;/span&gt;
      &lt;span class=&quot;sr-only&quot;&gt;Previous&lt;/span&gt;
    &lt;/a&gt;
    &lt;a class=&quot;right carousel-control&quot; href=&quot;#carousel-example-generic&quot; role=&quot;button&quot; data-slide=&quot;next&quot;&gt;
      &lt;span class=&quot;glyphicon glyphicon-chevron-right&quot; aria-hidden=&quot;true&quot;&gt;&lt;/span&gt;
      &lt;span class=&quot;sr-only&quot;&gt;Next&lt;/span&gt;
    &lt;/a&gt;
  &lt;/div&gt;
</code></pre>
<p>my js file then looks for a click event, and populates the carousel with images based on what was clicked:</p>
<pre><code>  if($(this).attr('id') == 'fall_A'){
    $('.item').remove();
    $( '.carousel-inner' ).append('&lt;div class=&quot;item active&quot;&gt;&lt;img id=&quot;img1&quot; src=&quot;img/fall_A1.png&quot; alt=&quot;...&quot;&gt;&lt;div class=&quot;carousel-caption&quot;&gt;&lt;/div&gt;&lt;/div&gt;');
    $('.item').after('&lt;div class=&quot;item&quot;&gt;&lt;img id=&quot;img2&quot; src=&quot;img/fall_A2.png&quot; alt=&quot;...&quot;&gt;&lt;div class=&quot;carousel-caption&quot;&gt;&lt;/div&gt;&lt;/div&gt;');
    $('.item').last().after('&lt;div class=&quot;item&quot;&gt;&lt;img id=&quot;img3&quot; src=&quot;img/fall_A3.png&quot; alt=&quot;...&quot;&gt;&lt;div class=&quot;carousel-caption&quot;&gt;&lt;/div&gt;&lt;/div&gt;');
  }
  else if($(this).attr('id') == 'fall_B'){
    $('.item').remove();
    $( '.carousel-inner' ).append('&lt;div class=&quot;item active&quot;&gt;&lt;img id=&quot;img1&quot; src=&quot;img/fall_B1.png&quot; alt=&quot;...&quot;&gt;&lt;div class=&quot;carousel-caption&quot;&gt;&lt;/div&gt;&lt;/div&gt;');
    $('.item').after('&lt;div class=&quot;item&quot;&gt;&lt;img id=&quot;img2&quot; src=&quot;img/fall_B2.png&quot; alt=&quot;...&quot;&gt;&lt;div class=&quot;carousel-caption&quot;&gt;&lt;/div&gt;&lt;/div&gt;');
    $('.item').last().after('&lt;div class=&quot;item&quot;&gt;&lt;img id=&quot;img3&quot; src=&quot;img/fall_B3.png&quot; alt=&quot;...&quot;&gt;&lt;div class=&quot;carousel-caption&quot;&gt;&lt;/div&gt;&lt;/div&gt;');
  }
</code></pre>
<p>and so on...</p>
<p>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 <em>works intermittently</em>. 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.</p>
<p>Any thoughts?</p>