swiper

Fangen Sie an | Dokumentation | Demos

Wiper

Swiper - ist der kostenlose und modernste Mobilfunkschieber mit hardwarebeschleunigten Übergängen und erstaunlichem nativem Verhalten. Es soll in mobilen Websites, mobilen Web -Apps und mobilen nativen/Hybrid -Apps verwendet werden.

Swiper ist nicht mit allen Plattformen kompatibel, sondern ein moderner Touch -Schieberegler, der sich nur auf moderne Apps/Plattformen konzentriert, um die beste Erfahrung und die beste Einfachheit zu erzielen.

Sponsoren

Merkmale

• Tree-Shakeable : Nur Module, die Sie verwenden, werden in das Bündel Ihrer App importiert.
• Mobilfreundlich : Es ist für mobile Websites, mobile Web-Apps und mobile native/hybride Apps verwendet.
• Bibliothek Agnostic : Swiper benötigt keine JavaScript -Bibliotheken wie JQuery, was Swiper viel kleiner und schneller macht. Es kann sicher mit Bibliotheken wie JQuery, Zepto, Jquery Mobile usw. verwendet werden.
• 1: 1 Berührungsbewegung : Standardmäßig liefert Swiper 1: 1 Touch -Bewegungs -Interaktion, dieses Verhältnis kann jedoch durch Swiper -Einstellungen konfiguriert werden.
• Mutationsbeobachter : Swiper hat eine Option, um Mutationsbeobachter zu aktivieren. Mit dieser Funktion wird Swiper automatisch wieder initialisiert und alle erforderlichen Parameter neu berechnet, wenn Sie dynamische Änderungen am DOM oder in Swiper -Stilen selbst vornehmen.
• Rich API : Swiper kommt mit einer sehr reichen API. Es ermöglicht es, Ihre eigene Pagination, Navigationsschaltflächen, Parallaxeffekte und vieles mehr zu erstellen.
• RTL : Swiper ist der einzige Schieberegler, der 100% RTL -Unterstützung mit korrektem Layout bietet.
• Multi -Zeilen -Objektträger -Layout : Swiper ermöglicht ein Layout mehrerer Zeilen -Objektträger mit ein paar Folien pro Spalte.
• Übergangseffekte : Fade, Flip, 3D Cube, 3D -Deckblatt.
• Zwei-Wege-Steuerung : Swiper kann für eine beliebige Anzahl anderer Swiper als Controller verwendet werden und gleichzeitig sogar kontrolliert werden.
• Vollständige Navigationskontrolle : Swiper wird mit allen erforderlichen integrierten Navigationselementen wie Pagination, Navigationspfeilen und Bildlaufleiste geliefert.
• Flexbox -Layout : Swiper verwendet ein modernes Flexbox -Layout für Folienlayout, das viele Probleme und Zeit mit Größenkassen löst. Ein solches Layout ermöglicht auch das Konfigurieren des Foliengitters mit reinem CSS.
• Am flexibelsten Layout -Gitter für Folien : Swiper hat viele Parameter für die Initialisierung, um es so flexibel wie möglich zu machen. Sie können die Folien pro Ansicht pro Säule, pro Gruppe, Platz zwischen Folien und vielem mehr steuern.
• Bilder fauler Laden : Wiper Lazy Ladeverzögerungen das Laden von Bildern in inaktiven/unsichtbaren Folien, bis der Benutzer darauf wischt. Eine solche Funktion könnte die Seite schneller laden und die Leistung der Swiper verbessern.
• Virtuelle Folien : Swiper wird mit virtuellen Folien ausgestattet, die großartig ist, wenn Sie viele Folien oder inhaltshörige/bildlastige Folien haben, sodass dies genau die erforderliche Anzahl von Folien in DOM hält.
• Schleifenmodus
• Autoplay
• Tastatursteuerung
• Mausradsteuerung
• Verschachtelte Schieberegler
• Geschichtsnavigation
• Hash Navigation
• Breakpoints -Konfiguration
• Barrierefreiheit (A11Y)
• Und noch viel mehr ...

Gemeinschaft

Die Swiper -Community finden Sie in Github -Diskussionen, in denen Sie Fragen, Sprachideen und Ihre Projekte teilen können

Unser Verhaltenskodex gilt für alle Swiper -Community -Kanäle.

Dist / bauen

Bei Produktionsdateien (JS und CSS) nur aus dist/ Ordner gibt es die stabilsten Versionen.

Entwicklungsbau

Installieren Sie alle Abhängigkeiten in Repos Root:

$ npm install

Und Entwicklungsversion von Swiper erstellen:

$ npm run build

Das Ergebnis ist in dist/ Ordner erhältlich.

Laufen Demos:

Alle Demos in ./playground Ordner. Dort finden Sie Core (HTML, JS), React, Vue -Versionen. Demo öffnen, rennen:

• Kern : npm run core
• React : npm run react
• Vue : npm run vue

Produktionsbau

$ npm run build:prod

Die Produktionsversion wird in dist/ Ordner erhältlich.

Beitragen

Alle Änderungen sollten nur für src/ Dateien verpflichtet werden. Bevor Sie ein Problem eröffnen, überprüfen Sie bitte die beitragende Richtlinie.

Hauptdarsteller

• Top -Feature -Anfragen (fügen Sie Ihre eigenen Stimmen mit der Reaktion hinzu)
• Top -Fehler? (Fügen Sie Ihre eigenen Stimmen mit der Reaktion hinzu)

Mitwirkende

Code -Mitwirkende

Dieses Projekt besteht dank aller Menschen, die einen Beitrag leisten. [Beitragen].

Finanzielle Mitwirkende

Werden Sie ein finanzieller Mitwirkender und helfen Sie uns, unsere Gemeinschaft aufrechtzuerhalten. [Beitragen]