title: How can I fix a Bootstrap Carousel 'offSetWidth' error
body: <p>I created a carousel with Bootstrap and then I get this error:<code>Uncaught TypeError: Cannot read property 'offsetWidth' of undefined.</code>Cause the error I cant slide my carousel control.</p>
  
  <p>Here is my HTML:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="carousel-example-generic" class="carousel slide center" data-ride="carousel" &gt;
     &lt;div class="carousel-inner center" role="listbox" style="width:500px;height: 500px;margin: auto" &gt;&lt;/div&gt;
       &lt;a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"&gt;
          &lt;span class="glyphicon glyphicon-chevron-left" aria-hidden="true"&gt;&lt;/span&gt;
          &lt;span class="sr-only"&gt;Previous&lt;/span&gt;&lt;/a&gt;
       &lt;a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"&gt;
          &lt;span class="glyphicon glyphicon-chevron-right" aria-hidden="true"&gt;&lt;/span&gt;
          &lt;span class="sr-only"&gt;Next&lt;/span&gt;
       &lt;/a&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>And here is my JavaScript:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$('a.certPhoto').click(function () {
          $('#photoDialog').modal('show');
          var _a = $(this).parents("tr");
          $("#photoDialog span.p_name").text(_a.find('.real_name').text());
          $("#photoDialog span.p_type").text(_a.find('.cert_type').text());
          $("#photoDialog span.p_ID").text(_a.find('.cert').text());
          var photo = $(this).data('photo');
          var _html = "";
          for (var i = 0, len = photo.length; i &lt; len; i++) {
              if (i == 0) {
                  _html += '&lt;div class="item active"&gt; &lt;img src="' + photo[i] + '" alt=""  &gt;&lt;div class="carousel-caption"&gt; &lt;/div&gt;&lt;/div&gt;';
              } else {
                  _html += '&lt;div class="item"&gt; &lt;img src="' + photo[i] + '" alt=""&gt;&lt;div class="carousel-caption"&gt; &lt;/div&gt;&lt;/div&gt;';
              }
          }
          $('.carousel-inner').html(_html);
          $(".carousel-inner img").each(function (i) {
              var img = $(this);
              var realWidth;
              var realHeight;
              $("&lt;img/&gt;").attr("src", $(img).attr("src")).load(function () {
                  realWidth = this.width;
                  realHeight = this.height;
                  if (realWidth &gt;= realHeight) {
                      if (realWidth &gt; 500) {
                          $(img).css("width", "500px");
                      }
                  } else {
                      if (realHeight &gt; 500) {
                          var _left = 500 * (1 - realWidth / realHeight) / 2;
                          $(img).css("height", '500px').css('margin-left', _left + "px");
                      }
                  }
              });
          });
  
      });</code></pre>
  </div>
  </div>
  </p>
  
  <p>I've found a few similar problems, but they don't appear applicable to me.The reason cause the similar problems mostly is lack of the class 'active' but I'm not.And it is strange that this error happened by accident.When I refresh my window then this error will be fixed.</p>
  
  <p>Any suggestions would be great.Thanks!</p>