67

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?

  • 1
    Can you link to the page with the error? Or could you put it in jsFiddle? – Alex W Apr 11 '15 at 17:27
170

For me it was because I hadn't set an active class on any of the slides.

|improve this answer|||||
  • Yes, that was the fix :) Thanks! – Xeen Apr 12 '15 at 10:55
  • 5
    If you compile bootstrap you can fix it by editing the carousel.js for the line $next[0].offsetWidth // force reflow Change to if (typeof $next == 'object' && $next.length) $next[0].offsetWidth // force reflow – fourgablesguy Dec 23 '15 at 21:56
  • 2
    in my case affecting both active class and also it may also rendred issue dive load before its contain loaded – damon Dec 31 '15 at 7:47
  • Awesome! Thanks Man – Ashok Shah Oct 21 '16 at 20:31
  • @fourgablesguy Hi, may I know what do you mean exactly by - compile bootstrap? how can bootstrap be manually compiled? Do u mean building the whole project? – Ashish Goyal Aug 24 '18 at 12:49
97

For me, I changed class='carousel-item' to class='item' like this

<div class="item">
    <img class="img-responsive" src="..." alt="...">
</div>
|improve this answer|||||
  • 5
    'carousel-item' is from the v4 alpha example. For this reason, I left it in but added 'item' so it would also work in v3 – Rick Westera Oct 16 '16 at 22:56
  • Worked for me too. Not sure why. – Dave Voyles - MSFT Mar 16 '17 at 17:53
  • Thank you so much! After agonizing over this problem for over an houre, this solved the problem for me too. – Folusho Oladipo Apr 28 '17 at 3:17
  • 2
    I am using both BootStrap 4 and 3 (long story) so adding item and carousel-item fixed the issue for me (neither one alone worked). – Steve Byrne Oct 20 '17 at 11:36
  • Using 4 beta 1 that pingendo.com is currently using, and had to add item alongside with carousel-item did the trick – Saad Dec 9 '17 at 6:18
8

Remove the class 'Carousal slide' on page load & add it dynamically when image gets loaded using jquery.This fixed for me

|improve this answer|||||
  • I am creating the whole carousel html content in jquery dynamically and still get the same error – Hari Ram Mar 26 '18 at 11:13
  • Note that we need to initialize the carousel using .carousel() method. – Anil kumar Sep 25 '18 at 12:10
1

I got same error. Because i used v4 alpha class names like carousel-control-next When i changed with v3, problem solved.

|improve this answer|||||
0

"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++;.

|improve this answer|||||
-1

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>
|improve this answer|||||

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.