Abrufen Kann die Eigenschaft 'offsetWidth' von undefined mit dem Bootstrap-Karussellskript nicht lesen

68

Ich habe ein carouselmit erstellt Bootstrap 3.3und es funktioniert auf meinem lokalen Computer, aber wenn ich das Ganze auf einen Server hochlade, auf dem die Bootstrap-JS-Datei zusammen mit anderen Dateien in einer einzigen Datei kompiliert wird, wird folgende Fehlermeldung angezeigt:

Cannot read property 'offsetWidth' of undefined - Hat sich jemand damit auseinandergesetzt und gibt es bekannte Lösungen für dieses Problem?

javascript jquery twitter-bootstrap Xeen
quelle
1
Können Sie mit dem Fehler auf die Seite verlinken? Oder könnten Sie es in jsFiddle setzen?
Alex W

Antworten:

175

Für mich war es, weil ich activeauf keiner der Folien eine Klasse festgelegt hatte.

Jack James
quelle
Ja, das war das Problem :) Danke!
Xeen
5
Wenn Sie Bootstrap kompilieren, können Sie es beheben, indem Sie die $next[0].offsetWidthif (typeof $next == 'object' && $next.length) $next[0].offsetWidth // force reflow
Datei carousel.js
3
In meinem Fall betrifft dies sowohl die aktive Klasse als auch die Ausgabe der Tauchlast, bevor sie geladen wird
Damon,
Genial! Danke Mann
Ashok Shah
@fourgablesguy Hallo, darf ich wissen, was du genau damit meinst - Bootstrap kompilieren? Wie kann Bootstrap manuell kompiliert werden? Meinst du das ganze Projekt bauen?
Ashish Goyal
102

Für mich, wechselte ich class='carousel-item'zu class='item'dieser mag

<div class="item">
    <img class="img-responsive" src="..." alt="...">
</div>
sonnig
quelle
5
'carousel-item' stammt aus dem v4 alpha-Beispiel. Aus diesem Grund habe ich es in belassen, aber 'item' hinzugefügt, damit es auch in
Rick Westera
Hat auch für mich gearbeitet. Nicht sicher warum.
Dave Voyles
Ich danke dir sehr! Nachdem ich mich über eine Stunde lang mit diesem Problem befasst hatte, löste dies das Problem auch für mich.
Folusho Oladipo
2
Ich verwende sowohl BootStrap 4 als auch BootStrap 3 (lange Geschichte), daher wurde das Problem durch Hinzufügen von Elementen und Karussellelementen behoben (keiner von beiden allein hat funktioniert).
Steve Byrne
Die Verwendung von 4 Beta 1, die pingendo.com derzeit verwendet und neben dem Karussell-Artikel einen Artikel hinzufügen musste, hat den Trick
getan
8

Entfernen Sie die Klasse 'Karussellfolie' beim Laden der Seite und fügen Sie sie dynamisch hinzu, wenn das Bild mit jquery geladen wird. Dies wurde für mich behoben

Anup Shetty
quelle
Ich erstelle den gesamten Karussell-HTML-Inhalt in jquery dynamisch und erhalte immer noch den gleichen Fehler
Hari Ram
Beachten Sie, dass wir das Karussell mit der Methode .carousel () initialisieren müssen.
Anil Kumar
1

Ich habe den gleichen Fehler bekommen. Da ich Alpha-Klassennamen der Version 4 verwendet habe, wie carousel-control-nextz. B. Als ich mit Version 3 geändert habe, wurde das Problem gelöst.

dgncn
quelle
0

"Ändern Sie zu if (typeof $ next == 'object' && $ next.length) $ next [0] .offsetWidth" - hat nicht geholfen. Wenn Sie Bootstrap 3 in PHP konvertieren (für WordPress-Theme), fügen Sie beim Hinzufügen von WP_Query ($ loop = new WP_Query ($ args);) $ count = 0; ein. Und und am Ende vor dem Ende; füge $ count ++ hinzu;.

Serhii Havryliuk
quelle
-1

Ich habe den gleichen Fehler erhalten, aber in meinem Fall habe ich Klassennamen für das Karussellelement als .karussellelement geschrieben, auf das die Datei bootstrap.css .item verweist. SO FEHLER gelöst. carosel-item wird in item umbenannt

<div class="carousel-item active"></div>

Umbenannt auf Folgendes:

<div class="item active"></div>
Hina Azhar
quelle