I created a carousel
with Bootstrap 3.3
and it works on my local machine, but when I upload the whole thing on server where the bootstrap js file is being compiled together with other files in a single file, I get this error:
Cannot read property 'offsetWidth' of undefined
- has anybody faced this and are there any known solutions to this issue?
This question is related to
javascript
jquery
twitter-bootstrap
For me it was because I hadn't set an active
class on any of the slides.
Remove the class 'Carousal slide' on page load & add it dynamically when image gets loaded using jquery.This fixed for me
For me, I changed class='carousel-item'
to class='item'
like this
<div class="item">
<img class="img-responsive" src="..." alt="...">
</div>
if you're using the compiled bootstrap, one of the ways of fixing it is by editing the bootstrap.min.js before the line
$next[0].offsetWidth
force reflow Change to
if (typeof $next == 'object' && $next.length) $next[0].offsetWidth // force reflow
"Change to if (typeof $next == 'object' && $next.length) $next[0].offsetWidth" -did not help. if you convert Bootstrap 3 to php(for WordPress theme), when adding WP_Query ($loop = new WP_Query( $args );) insert $count = 0;. And and at the end before endwhile; add $count++;.
I have got the same error, but in my case I wrote class names for carousel item as .carousel-item the bootstrap.css is referring .item. SO ERROR solved. carosel-item is renamed to item
<div class="carousel-item active"></div>
RENAMED To the following:
<div class="item active"></div>
I got same error. Because i used v4 alpha class names like carousel-control-next
When i changed with v3, problem solved.
Source: Stackoverflow.com