Bootstrap: "Cannot read property 'offsetWidth' of undefined" error with carousel

Question

I'm using multiple in carousels Bootstrap:

<div id="carousel-586" class="carousel slide carousel-block" data-ride="carousel">
    <ol class="carousel-indicators">
        <li data-target="#carousel-586" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-586" data-slide-to="1"></li>
        <li data-target="#carousel-586" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner" role="listbox">
        <div class="item active">
            <img src="..." alt="...">
        </div>
        <div class="item">
            <img src="..." alt="...">
        </div>
        <div class="item">
            <img src="..." alt="...">
        </div>
    </div>
    <!-- Controls -->
    <a class="left carousel-control" href="#carousel-586" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#carousel-586" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
        <span class="sr-only">Next</span>
    </a>
</div>

However, I'm receiving an error in JavaScript:

Uncaught TypeError: Cannot read property 'offsetWidth' of undefined

I've found a few similar problems (1, 2), but they don't appear applicable to me.

Despite the errors the carousel functions without problems, but I'd prefer to know what's causing the errors and fix them.

Any suggestions would be great.

Answer 1

I found this question googling for the same issue. I have three different carousels that are displayed in the same container div element. I keep two of them hidden using jQuery.toggle() and only shows one of them at the time. The user can switch between the different carousels using a toggle button.

Though this question did not solve my problem, I thought I'd share my solution for the next person to encounter this problem. Apparently, you must have the class "active" set on all three carousels , independent of whether they are visible or not. I ended up with the following markup (essentially).

<div id="carousel-container">
    <div id="carousel1" class="carousel slide" data-ride="carousel">
        <ol class="carousel-indicators">
            <li class="active" data-target="#carousel1" data-slide-to="1"></li>
             <li data-target="#carousel1" data-slide-to="2"></li>
         </ol>
         <div class="carousel-inner" role="listbox">
             <div class="item active">...</div>
             <div class="item">...</div>
         </div>
    </div>
    <div id="carousel2" class="carousel slide" data-ride="carousel" style="display:none;">
         <ol class="carousel-indicators">
             <li class="active" data-target="#carousel2" data-slide-to="1"></li>
             <li data-target="#carousel2" data-slide-to="2"></li>
         </ol>
         <div class="carousel-inner" role="listbox">
             <div class="item active">...</div>
             <div class="item">...</div>
         </div>
    </div>
    <div id="carousel3" class="carousel slide" data-ride="carousel" style="display:none;">
        <ol class="carousel-indicators">
            <li class="active" data-target="#carousel3" data-slide-to="1"></li>
            <li data-target="#carousel3" data-slide-to="2"></li>
         </ol>
         <div class="carousel-inner" role="listbox">
             <div class="item active">...</div>
             <div class="item">...</div>
         </div>
    </div>
</div>

Point being is that despite that the divs with id "carousel2" and "carousel3" both has their display property set to "none", they still need to have an element with the class "active" (and corresponding navigation/carousel indicator). Hope it helps someone.