Swiper ist die JavaScript-Bibliothek, die jedes Karussell in Elementor antreibt: das Image Carousel, Media Carousel, Zeugniskarussell, Schleifenkarussell, und jeder Dritte Elementarkarussell-Widget Sie haben installiert Es ist keine Elementor-Funktion Es ist eine Open-Source-Slider-Bibliothek, die Elementor bündelt.
Das Wissen ändert, wie Sie ein kaputtes Karussell debuggen Wenn ein Schieberegler nicht mehr funktioniert, liegt das Problem fast nie am Widget. Es ist so, dass Swiper nicht geladen, nicht initialisiert oder initialisiert hat, bevor sein Container eine Breite hatte.
Schnellkorrektur: Der Schieberegler funktionierte nach einem Plugin-Update nicht mehr
Wenn Sie hier sind, weil plötzlich ein funktionierendes Karussell gestorben ist, versuchen Sie es, bevor Sie etwas anderes lesen:
- Öffnen Sie Ihr Caching- oder Optimierungs-Plugin.
- Finden Sie die JavaScript-Einstellungen: Kombinieren Sie JS, Defer JS, Delay JS.
- Alle drei ausschalten Cache löschen Seite neu laden.
Wenn das Karussell zurückkommt, hat die JS-Optimierung es kaputt gemacht, und die Lösung ist eher ein Ausschluss als eine Abschaltung der Optimierung. Genaue Ausschlüsse weiter unten.
Was Swiper eigentlich macht
Drei verschachtelte Elemente Ein Behälter, eine Hülle darin, und gleitet darin Swiper liest die Breite des Behälters, berechnet, wie viel die Hülle für jeden Schlitten bewegt werden soll, und wendet eine CSS-Transformation auf die Hülle anDie Schlitten bewegen sich nie einzeln; der ganze Streifen gleitet unter einem Fenster hindurch.
Deshalb dominieren zwei Kategorien von Fehlern:
Das Skript lief nicht. Nichts initialisiert, so dass Sie alle Folien gestapelt oder in einer Reihe ohne Interaktion sehen Swipers CSS ist normalerweise noch da, so dass es halb gestylt und nicht schlicht gebrochen aussieht.
Der Behälter hatte bei der Messung keine Breite. Swiper gegen Null berechnet, also überlappen sich Dias, sitzen in der falschen Größe, oder die Spur springt Das ist der Tab und Akkordeon Bug: Ein Karussell im Inneren einer versteckten Platte misst sich selbst, während es versteckt ist.
Die fünf Dinge, die Elementor-Karussells kaputt machen
1. JavaScript-Kombination und -Verschiebung
Die häufigste Ursache mit großem Abstand.
Swiper muss definiert werden, bevor der Inline-Initialisierungscode ausgeführt wird Das Kombinieren von JS-Neuordnungsdateien Durch Aufschieben wird die Ausführung über den Inline-Aufruf hinaus verschoben. Durch Verzögern von JS wird die Bibliothek bis zur Benutzerinteraktion zurückgehalten. Zu diesem Zeitpunkt wurde die Init bereits abgefeuert und ist fehlgeschlagen.
Öffnen Sie Ihre Browserkonsole Wenn Sie sehen Swiper is not defined oder Cannot read properties of undefined„Das ist Ihr Problem.
Fix: Schließen Sie die Swiper-Handles von der Optimierung aus, anstatt sie im Großhandel zu deaktivieren. Im LiteSpeed-Cache finden Sie unter Seitenoptimierung → JS-Einstellungen. Hinzufügen:
swiper
elementor-frontend
jquery-coreEines vermissen die Leute bei LiteSpeed: Es gibt separate Ausschlussfelder und Der Gastmodus hat seine eigenen. Wenn Sie nur die Hauptbox JS Excludes füllen, sehen eingeloggte Benutzer ein funktionierendes Karussell und abgemeldete Besucher nicht, was genau der Fehler ist, der das Testen überlebt, weil Sie während des Tests angemeldet sind Setzen Sie die gleichen Ausschlüsse in das Feld Gastmodus.
WP Rocket: Dateioptimierung → Ausgeschlossene JavaScript-Dateien, plus die gleichen Zeichenfolgen unter Delay JavaScript Execution Autoptimieren: Extra → Skripte von Autoptimieren ausschließen.
2. Karussell in einem versteckten Behälter
Ein Karussell in einer Lasche, einem Akkordeon oder einer Leinwand außerhalb der Leinwand initialisiert sich, während die Platte geöffnet ist display: none. Breite liest sich als Null, und die Mathematik ist vom ersten Frame an falsch Öffnen Sie die Registerkarte und Sie erhalten überlappende Folien oder eine Spur, die sich nicht bewegen lässt.
Fix: Die meisten Widgets legen eine Einstellung “Beobachter” frei Schalten Sie es ein und Swiper Uhren für Größenänderungen und berechnet neu, wenn Ihr nicht, setzen Sie das Karussell in die erste Registerkarte, die bei Belastung sichtbar ist.
3. Schleifenmodus mit zu wenigen Folien
Loop funktioniert durch Klonen von Dias, um den Wrap-Around vorzutäuschen. Es benötigt mindestens das Doppelte der Dias-per-View-Zahl, um genug zum Klonen zu haben. Vier Dias bei Three-per-View erzeugen einen sichtbaren Sprung, leere Lücken oder einen Track, der auf halbem Weg stoppt.
Fix: Folien hinzufügen oder Schleife ausschalten Es gibt keine Einstellung, die eine kurze Schleife glatt macht.
4. Zwei Swiper-Versionen auf einer Seite
Elementor bündelt eine Version; einige Addons bündeln ihre eigene Beide registrieren das gleiche global, wer die Sekunde lädt, gewinnt, und wenn ein Widget gegen eine andere API gebaut wurde, bricht es, oft mit einem Fehler über eine Methode, die nicht existiert.
Fix: In der Konsole, laufen Swiper.version. Dann deaktivieren Sie Addons einzeln, bis sich der Wechsel nicht mehr ändert. Gut benutzte Plugins verwenden die Kopie von Elementor wieder, anstatt ihre eigene zu versenden. Der Karussell Plugin Vergleich Notizen, welche tun.
5. Faules Laden im Kampf gegen den Schieber
Aggressives Bildfaulladen, insbesondere ein separates Lazy-Load-Plugin oben auf dem Design, kann Folienbilder auf Nullhöhe belassen, bis sie in Sichtweite scrollen. Außer, dass sie nie in Sichtweite scrollen, weil sie sich auf einer horizontalen Spur befinden Ergebnis: ein Karussell leerer Kisten.
Fix: Schließen Sie die Bildklasse des Karussells vom Lazy-Load-Plugin aus oder legen Sie explizite Breite und Höhe auf den Bildern fest, damit die Kästchen Platz reservieren. Videokarussells Treffen Sie dies am härtesten, da jede Folie außerhalb des Bildschirms sowohl einen Spieler als auch ein Bild enthält.
So überprüfen Sie, ob Swiper geladen ist
Dreißig Sekunden, und es sagt Ihnen, welche Hälfte des Problems Sie haben.
- Öffnen Sie die Seite mit dem kaputten Karussell.
- Öffnen Sie die Browserkonsole (F12, oder klicken Sie mit der rechten Maustaste auf → Inspect → Konsole).
- Typ
typeof Swiperund drücken Sie die Eingabetaste.
"function" Bedeutet, dass die Bibliothek geladen ist. Ihr Problem ist also die Initialisierung: Schauen Sie sich versteckte Container oder Schleifeneinstellungen an. "undefined" Bedeutet, es ist nie angekommen, und die Ursache ist JS-Optimierung oder ein Skript, das früher in der Kette fehlgeschlagen ist Scrollen Sie in der Konsole nach oben für den ersten roten Fehler, nicht für den letzten; spätere Fehler sind normalerweise Folgen des ersten.
Swiper-Einstellungen, die in Elementor wichtig sind
Die meisten Widgets legen diese unter Karusselleinstellungen offen, manchmal mit unterschiedlichen Bezeichnungen:
- Folien pro Ansicht: wie viele sind sichtbar; Es ist die einzige Einstellung, die trennt Ein Karussell aus einem Schieber. Stellen Sie immer pro Haltepunkt ein.
- Folien zum Scrollen: wie viel Vorlauf pro Klick Wenn Sie dies auf Folien pro Ansicht einstellen, erhalten Sie Seiten-Paging; Wenn Sie es auf 1 setzen, entsteht ein kontinuierliches Gefühl.
- Geschwindigkeit: Übergangsdauer in ms. 300 bis 500 für Standard, langsamer für 3 D.
- Autoplay-verzögerung: auf jeder Folie anhalten Auf 0 setzen und es wird ein Festzelt, und so ist die Logo Slider Widget Meist konfiguriert ist.
- Schleife: unendliche Umhüllung Braucht genügend Folien, wie oben.
- Autohöhe: container passt zur höchsten sichtbaren Folie Nützlich für unebenen Text, und es führt eine Höhenanimation ein, die sprunghaft aussehen kann, so dass es sich lohnt, sie zu testen, anstatt anzunehmen.
- Zentrierte Folien: Aktive Rutsche sitzt in der Mitte und nicht bündig links. Es ist erforderlich, dass der Deckungsfluss nach rechts aussieht.
Wo diese im freien erscheinen Bild Karussell Widget: Der Bildkarussell-Durchgang Panel-Screenshots hat.
Soll man seinen eigenen Swiper laden?
Nein, in fast jedem Fall Die Kopie von Elementor steht bereits auf der Seite, wenn ein Karussell-Widget vorhanden ist, und das Hinzufügen eines zweiten führt zu dem oben genannten Versionskonflikt.
Die Ausnahme ist ein benutzerdefinierter Schieberegler auf einer Seite ohne Elementor-Karussell-Widget. Dann ist Elementors Swiper nicht in der Warteschlange und Sie benötigen einen eigenen. Inqueue es unter Auflagen, nur auf dieser Vorlage, damit Sie den Konflikt nicht überall sonst wieder einführen.
Häufig gestellte Fragen
Was ist Swiper in Elementor?
Swiper ist die Open-Source-JavaScript-Slider-Bibliothek, die Elementor für alle seine Karussell - und Slider-Widgets verwendet Elementor bündelt sie und stellt sie in Anspruch, wann immer ein Karussell-Widget auf der Seite erscheint Die meisten Elementor-Karussell-Addons von Drittanbietern verwenden dieselbe Kopie, anstatt ihre eigene zu versenden.
Warum funktioniert mein Elementor Swiper-Slider nicht?
Neun von zehn Fällen ist es JavaScript-Optimierung von einem Caching-Plugin: Kombinieren, verschieben oder verzögern Sie JS, indem Sie die Skripte neu ordnen, damit Swiper nicht definiert ist, wenn der Init-Code ausgeführt wird. Schalten Sie diese drei aus und laden Sie sie neu. Wenn der Schieberegler zurückkehrt, fügen Sie hinzu swiper, elementor-frontend und jquery-core auf die JS-Ausschlüsse des Plugins, anstatt die Optimierung deaktiviert zu lassen.
Wie behebe ich “Swiper ist nicht definiert”?
Die Bibliothek wurde nicht geladen, bevor der Initialisierungscode ausgeführt wurde Schließen Sie den Swiper von JS aus, indem Sie Ihr Cache-Plugin kombinieren, verschieben und verzögern. Fügen Sie bei LiteSpeed die Ausschlüsse sowohl zum Feld Gastmodus als auch zum Hauptfeld hinzu, da es sonst für angemeldete Benutzer und Pausen für Besucher funktioniert.
Welche Swiper-Version verwendet Elementor?
Es ändert sich mit Elementor-Releases Überprüfen Sie es auf jeder Seite mit einem Karussell, indem Sie die Konsole öffnen und ausführen Swiper.version. Wenn das eine andere Zahl zurückgibt, als Sie erwarten, lädt ein Addon seine eigene Kopie und überschreibt die von Elementor.
Warum überlappen oder stapeln sich meine Folien übereinander?
Swiper hat den Behälter bei Nullbreite gemessen, normalerweise weil das Karussell bei Seitenlast in einer versteckten Lasche, einem Akkordeon oder einem Popup sitzt. Aktivieren Sie die Beobachtereinstellung, sodass sie neu berechnet wird, wenn der Behälter sichtbar wird, oder bewegen Sie das Karussell auf eine standardmäßig geöffnete Platte.
Warum funktioniert mein Karussell, wenn es angemeldet ist, aber nicht für Besucher?
Caching. Angemeldete Benutzer umgehen normalerweise den Cache und erhalten nicht optimierte Skripte, sodass der Schieberegler funktioniert Besucher erhalten die zwischengespeicherte, kombinierte und verzögerte Version und sie bricht ein Testen in einem privaten Fenster und suchen Sie nach einer separaten Gast- oder nicht authentifizierten Ausschlussliste in Ihrem Cache-Plugin.
Wenn es noch kaputt ist
Arbeiten Sie in dieser Reihenfolge: Konsolen-Check zuerst (typeof Swiper), dann Ausschlüsse zwischenspeichern, dann Addons einzeln in einer Staging-Kopie deaktivieren Diese Sequenz findet die Ursache in fast jedem Fall in weniger als zehn Minuten.
Designs, die über das importiert werden Widget-builder Verwenden Sie den gleichen Swiper-Build wie die Standard-Widgets, sodass diese Korrekturen auch für sie gelten Die Preisseite Deckt ab, welcher der zwanzig einen Führerschein benötigt.
Wenn man lieber von etwas Bekanntem ausgeht, dann ist jedes Karussell-Widget auf dem Elementorkarussell-Widgets Seitenversand mit den exklusionsicheren Skripthandles dokumentiert, und die Loop Carousel Führung Deckt die dynamische Abfragevariante derselben Probleme ab. Wenn Sie ein Widget auswählen, anstatt eines zu beheben, Die kostenlose Karussell Widget Aufschlüsselung und die Zwanzig Schiebervorlagen Sind die beiden Orte, an denen man anfangen sollte.
