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 (.min.js:6:6890)
    at c.next (.min.js:6:6128)
    at e (.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?

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./js/bootstrap.min.js:6:6890)
    at c.next (https://www.somewebsite./js/bootstrap.min.js:6:6128)
    at e (https://www.nastassiafreeman./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?

• javascript
• twitter-bootstrap-3
• carousel

• You js is execution after the window load? – Diego Incerti Commented Dec 5, 2016 at 20:09
• You can try to use bootstrap.js instead of bootstrap.min.js to make script more readable while you are looking for the solution. – Gleb Kemarsky Commented Dec 6, 2016 at 14:57
• @Diego yes the window loads. I have resolved this problem by implementing a different design altogether. I've also resolved to never use Bootstrap again if I can help it. – freedoggy Commented Jan 5, 2018 at 16:27

3 Answers 3

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./900x300/c69/f9c/?text=1" alt=""></div>');
  selectInner.append('<div class="item"><img src="https://via.placeholder./900x300/9c6/cf9/?text=2" alt=""></div>');
  selectInner.append('<div class="item"><img src="https://via.placeholder./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./900x300/c69/f9c/?text=4" alt=""></div>');
  selectInner.append('<div class="item"><img src="https://via.placeholder./900x300/9c6/cf9/?text=5" alt=""></div>');
  selectInner.append('<div class="item"><img src="https://via.placeholder./900x300/69c/9cf/?text=6" alt=""></div>');
  selectCarousel.carousel();
})

@import url('https://maxcdn.bootstrapcdn./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./ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn./bootstrap/3.3.7/js/bootstrap.min.js"></script>

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.

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.