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

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