Swiper er JavaScript-biblioteket, der driver hver karrusel i Elementor: Billedkarrusellen, Mediekarrusellen, Testimonial Carousel, Loop Karrusel, og hver tredjepart Elementorkarruselwidget du har installeret. Det er ikke en Elementor-funktion. Det er et open source-skyderbibliotek, som Elementor samler.
At vide, at det ændrer, hvordan du fejlsøger en ødelagt karrusel. Når en skyder holder op med at virke, er problemet næsten aldrig widgetten. Det er, at Swiper ikke indlæste, ikke initialiserede eller initialiserede, før dens beholder havde en bredde.
Hurtig løsning: skyderen stoppede med at arbejde efter en plugin-opdatering
Hvis du er her, fordi en arbejdskarrusel pludselig døde, så prøv dette, før du læser noget andet:
- Åbn dit caching- eller optimeringsplugin.
- Find JavaScript-indstillingerne: Kombiner JS, Defer JS, Delay JS.
- Sluk alle tre. Ryd cachen. Genindlæs siden.
Hvis karrusellen kommer tilbage, brød JS-optimering den, og rettelsen er en udelukkelse i stedet for at lade optimering være slukket. Præcise udelukkelser længere nede.
Hvad Swiper faktisk gør
Tre indlejrede elementer. En beholder, en indpakning inde i den, og glider inde i det. Swiper læser beholderens bredde, beregner, hvor meget der skal flyttes indpakningen for hver slide, og anvender en CSS-transformation på indpakningen. Sliderne bevæger sig aldrig individuelt; hele strimlen glider under et vindue.
Hvilket er grunden til, at to kategorier af bug dominerer:
Manuskriptet kørte ikke. Intet initialiserer, så du ser alle dias stablet eller i træk uden interaktion. Swipers CSS er der normalt stadig, så det ser halvstilet ud i stedet for tydeligt brudt.
Beholderen havde ingen bredde, da den målte. Swiper beregnet mod nul, så slides overlapper, sidde på den forkerte størrelse, eller sporet hopper. Dette er fanen og harmonika bug: en karrusel inde i et skjult panel måler sig selv, mens skjult.
De fem ting, der knækker Elementor karruseller
1. JavaScript kombinerer og udskyder
Den mest almindelige årsag med bred margin.
Swiper skal defineres, før inline initialiseringskoden kører. Kombination af JS-genbestillingsfiler. Udskydelse skubber udførelse forbi inline-kaldet. Forsinkelse af JS holder biblioteket tilbage indtil brugerinteraktion, på hvilket tidspunkt init'et allerede blev affyret og mislykkedes.
Åbn din browserkonsol. Hvis du ser Swiper is not defined eller Cannot read properties of undefined, dette er dit problem.
Fix: udeluk swiperhåndtagene fra optimering i stedet for at deaktivere det engros. I LiteSpeed Cache, der er under Sideoptimering → JS-indstillinger. Tilføj:
swiper
elementor-frontend
jquery-coreEn ting, folk savner på LiteSpeed: der er separate udelukkelsesfelter, og Guest Mode har sin egen. Hvis du kun udfylder hovedboksen JS Excludes, ser indloggede brugere en fungerende karrusel, og loggede besøgende gør det ikke, hvilket er præcis den fejl, der overlever test, fordi du er logget ind, mens du tester. Sæt de samme undtagelser i feltet Gæstetilstand.
WP Rocket: Filoptimering → Udelukkede JavaScript-filer, plus de samme strenge under Delay JavaScript Execution. Autoptimer: Ekstra → Udeluk scripts fra Autoptimer.
2. Karrusel inde i en skjult beholder
En karrusel i et faneblad, harmonika eller off-canvas panel initialiseres, mens panelet er display: none. Bredde læser som nul, og matematikken er forkert fra den første ramme. Åbn fanen, og du får overlappende dias eller et spor, der ikke vil flytte.
Fix: de fleste widgets udsætter en “observatør” indstilling. Slå den til og Swiper ser for størrelsesændringer og genberegner. Hvis din ikke gør det, skal du sætte karrusellen i den første fane, som er synlig på belastning.
3. Loop-tilstand med for få dias
Loop fungerer ved at klone dias for at forfalske wrap-around. Det har brug for mindst to gange dias-per-view-antallet for at have nok til at klone. Fire dias ved tre-per-view producerer et synligt spring, tomme mellemrum eller et spor, der stopper halvvejs.
Fix: tilføj slides, eller sluk for loop. Der er ingen indstilling, der gør en kort loop glat.
4. To Swiper versioner på én side
Elementor bundter en version; nogle tilføjelser bundter deres egen. Begge registrerer den samme globale. Uanset hvilken indlæser anden vinder, og hvis en widget blev bygget mod en anden API, bryder den, ofte med en fejl om en metode, der ikke eksisterer.
Fix: i konsollen, kør Swiper.version. Deaktiver derefter addons en ad gangen, indtil det holder op med at ændre sig. Velopdragne plugins genbruger Elementors kopi i stedet for at sende deres egen. Karrusel plugin sammenligningen bemærker hvilke der gør.
5. Doven lastning kæmper skyderen
Aggressiv billeddoven indlæsning, især et separat lazy-load plugin oven på temaets, kan efterlade diasbilleder i nul højde, indtil de ruller til syne. Bortset fra at de aldrig ruller til syne, fordi de er på et vandret spor. Resultat: en karrusel af tomme kasser.
Fix: ekskluder karrusellens billedklasse fra plugin'et med doven belastning, eller indstil eksplicit bredde og højde på billederne, så kasserne reserverer plads. Videokarruseller ram dette hårdest, fordi hver off-screen slide bærer en spiller såvel som et billede.
Sådan kontrolleres om Swiper indlæst
Tredive sekunder, og det fortæller dig, hvilken halvdel af problemet du har.
- Åbn siden med den ødelagte karrusel.
- Åbn browserkonsollen (F12, eller højreklik → Inspicer → Konsol).
- Type
typeof Swiperog tryk enter.
"function" betyder, at biblioteket er indlæst, så dit problem er initialisering: se på skjulte beholdere eller loop-indstillinger. "undefined" betyder, at det aldrig ankom, og årsagen er JS optimering eller et script, der mislykkedes tidligere i kæden. Rul op i konsollen for den første røde fejl, ikke den sidste; senere fejl er normalt konsekvenser af den første.
Swiper-indstillinger, der betyder noget i Elementor
De fleste widgets afslører disse under Karruselindstillinger, nogle gange med forskellige etiketter:
- Slides pr. visning: hvor mange er synlige; det er den ene indstilling, der adskiller en karrusel fra en skyder. Indstil pr. brudpunkt, altid.
- Slides til at rulle: hvor mange går videre pr. klik. Indstilling af dette lig med slides-per-view giver dig side-stil personsøgning; indstilling af det til 1 giver en kontinuerlig følelse.
- Speed: overgangsvarighed i ms. 300 til 500 for standard, langsommere for 3D.
- Autoplay forsinkelse: pause på hver slide. Indstil til 0, og det bliver en marquee, hvilket er hvordan den Logo Slider widget er normalt konfigureret.
- Loop: uendelig wrap. Har brug for nok dias, som ovenfor.
- Auto højde: container matcher den højeste synlige slide. Nyttig til ujævn tekst, og den introducerer en højdeanimation, der kan se jumpy ud, så det er værd at teste i stedet for at antage.
- Centrerede dias: aktiv slide sidder i midten i stedet for at skylle til venstre. Nødvendig for at coverflow ser rigtigt ud.
Hvor disse optræder i det frie Billede Karrusel widget: billedkarruselgennemgangen har panelets skærmbilleder.
Skal du læsse din egen Swiper?
Nej, i næsten alle tilfælde. Elementors kopi er allerede på siden, når en karrusel-widget er til stede, og tilføjelse af en anden forårsager versionskonflikten ovenfor.
Undtagelsen er en brugerdefineret skyder på en side uden Elementor karrusel widget overhovedet. Så er Elementors Swiper ikke i kø, og du har brug for din egen. Sæt den i kø betinget, kun på den skabelon, så du ikke genindfører konflikten alle andre steder.
Ofte stillede spørgsmål
Hvad er Swiper i Elementor?
Swiper er open-source JavaScript skyderen bibliotek, som Elementor bruger til alle sine karrusel og skyder widgets. Elementor bundter det og sætter det i kø, hver gang en karrusel widget vises på siden. De fleste tredjeparts Elementor karrusel addons bruger den samme kopi i stedet for at sende deres egen.
Hvorfor virker min Elementor Swiper skyder ikke?
Ni gange ud af ti er det JavaScript-optimering fra et caching-plugin: kombiner, udskyd eller forsink JS genbestilling af scripts, så Swiper ikke er defineret, når init-koden kører. Sluk for disse tre og genindlæs. Hvis skyderen vender tilbage, skal du tilføje swiper, elementor-frontend og jquery-core til plugin'ets JS-ekskluderinger i stedet for at lade optimering være deaktiveret.
Hvordan fikser jeg “Svisker er ikke defineret”?
Biblioteket blev ikke indlæst, før initialiseringskoden kørte. Udeluk swiper fra JS, der kombinerer, udskyder og forsinker dit cache-plugin. På LiteSpeed skal du tilføje udelukkelserne til feltet Gæstetilstand såvel som det primære, ellers virker det for loggede brugere og pauser for besøgende.
Hvilken Swiper version bruger Elementor?
Det ændres med Elementor udgivelser. Kontroller det på enhver side med en karrusel ved at åbne konsollen og køre Swiper.version. Hvis det returnerer et andet nummer, end du forventer, indlæser en tilføjelse sin egen kopi og tilsidesætter Elementors.
Hvorfor overlapper eller stabler mine slides oven på hinanden?
Swiper målte beholderen ved nul bredde, normalt fordi karrusellen sidder inde i en skjult fane, harmonika eller popup ved sidebelastning. Aktiver observatørindstillingen, så den genberegner, når beholderen bliver synlig, eller flyt karrusellen til et panel, der er åbent som standard.
Hvorfor virker min karrusel, når jeg er logget ind, men ikke for besøgende?
Caching. Loggede brugere går typisk uden om cachen og får uoptimerede scripts, så skyderen virker. Besøgende får den cachelagrede, kombinerede og udskudte version, og den går i stykker. Test i et privat vindue, og tjek efter en separat gæst eller uautoriseret udelukkelsesliste i dit cache-plugin.
Hvis det stadig er i stykker
Arbejde i denne rækkefølge: konsol kontrol først (typeof Swiper), derefter cache udelukkelser, derefter deaktivere addons en ad gangen i en iscenesættelse kopi. Den sekvens finder årsagen i under ti minutter for næsten alle tilfælde.
Design importeret gennem Widget Builder brug den samme Swiper-build som lagerwidgets, så disse rettelser gælder også for dem. Den prissætning side dækker over, hvem af de tyve, der har brug for en licens.
Hvis du hellere vil starte fra noget kendt-godt, hver karrusel widget på Elementor Carousel Widgets siden leveres med de dokumenterede udelukkelsessikre scripthåndtag, og Loop Karruselføring dækker den dynamiske-forespørgsel variant af de samme problemer. Hvis du vælger en widget snarere end at fastsætte en, den gratis karrusel widget opdeling og the tyve skyderskabeloner er de to steder at starte.
