So erstellen Sie mit Swiper wischbare Schnittstellen in Ihrer React-Anwendung

Da mobile Geräte immer beliebter werden, sind wischbare Oberflächen zu einer Standardmethode für die Interaktion mit Anwendungen geworden. Wischbare Oberflächen sind unerlässlich, um mobilen Benutzern das beste Benutzererlebnis zu bieten.

Swiper ist eine vielseitige Bibliothek, mit der Sie wischbare Schnittstellen in Ihren React-Anwendungen erstellen können. Entdecken Sie, wie Sie mit Swiper wischbare Schnittstellen in Ihrer React-Anwendung erstellen können.

Swiper installieren

Swiper ist eine der vielen Bibliotheken, mit denen Sie Ihre React-Anwendung anpassen können. Um mit Swiper zu beginnen, müssen Sie es in Ihrer React-Anwendung installieren. Sie können dies mit dem folgenden Terminalbefehl tun, den Sie im Stammverzeichnis Ihres Projekts ausführen sollten:

NPM Swiper installieren

Sobald Sie Swiper installiert haben, können Sie es in Ihrer Anwendung verwenden.

Erstellen von wischbaren Schnittstellen

Nachdem Sie Swiper in Ihrer React-Anwendung installiert haben, können Sie wischbare Schnittstellen erstellen. Beginnen Sie mit dem Importieren der Swiper Und SwiperSlide Komponenten aus der Swiper-Bibliothek.

Die Swiper-Komponente ist die Kernkomponente der Swiper-Bibliothek. Es definiert die Struktur, das Verhalten und die Funktionalität der wischbaren Elemente. Die SwiperSlide-Komponente ist eine untergeordnete Komponente der Swiper-Komponente. Es definiert einzelne Folien, die sich innerhalb der Swiper-Komponente befinden.

Hier ist ein Beispiel einer wischbaren Oberfläche mit den Komponenten Swiper und SwiperSlide:

importieren Reagieren aus'reagieren';
importieren { Swiper, SwiperSlide} aus„Swiper/Reagieren“;
importieren'swiper/css';
FunktionApp() {
zurückkehren (




<divKlassenname='Element'>Element 1div></SwiperSlide>
<divKlassenname='Element'>Element 2div></SwiperSlide>
<divKlassenname='Element'>Element 3div></SwiperSlide>
<divKlassenname='Element'>Element 4div></SwiperSlide>
 </Swiper>
 </div>
 )
}
ExportStandard App

In Ergänzung zu Swiper Und SwiperSlide Komponenten importiert dieser Codeblock das Standard-Stylesheet für Swiper mithilfe von Swiper/CSS Modul.

Das Beispiel umhüllt dann eine Swiper-Komponente um vier untergeordnete SwiperSlide-Komponenten. Jeder SwiperSlide enthält eine div Element mit dem Klassenname Attribut. Sie können den Klassennamen verwenden, um die div-Elemente zu formatieren:

.Element {
Inline-Größe: 100px;
Grenzradius: 12px;
Polsterung: 1rem;
Farbe: #333333;
Hintergrundfarbe: #e2e2e2;
Schriftfamilie: kursiv;
}

Anpassen Ihrer Swipe-Oberfläche

Nachdem Sie erfolgreich eine wischbare Oberfläche erstellt haben, können Sie deren Erscheinungsbild und Funktionalität entsprechend Ihren Anforderungen verbessern.

Mit Swiper können Sie das Verhalten und Erscheinungsbild der Benutzeroberfläche mithilfe verschiedener Optionen anpassen. Sie übergeben diese Optionen an die Swiper Komponente als Requisiten in React:

importieren Reagieren aus'reagieren';
importieren { Swiper, SwiperSlide} aus„Swiper/Reagieren“;
importieren'swiper/css';
FunktionApp() {
zurückkehren (



 spaceBetween={30}
 slidesPerView={2}
 Schleife={ WAHR }
 >
<divKlassenname='Element'>Element 1div></SwiperSlide>
<divKlassenname='Element'>Element 2div></SwiperSlide>
<divKlassenname='Element'>Element 3div></SwiperSlide>
<divKlassenname='Element'>Element 4div></SwiperSlide>
 </Swiper>
 </div>
 )
}
ExportStandard App

In diesem Beispiel nimmt die Swiper-Komponente drei Requisiten auf: spaceBetween, slidesPerView, Und Schleife. Der spaceBetween prop legt den Abstand zwischen den einzelnen Folien fest, in diesem Fall 30 Pixel.

Verwendung der slidesPerView prop können Sie die Anzahl der gleichzeitig sichtbaren Folien festlegen. In diesem Fall ist die slidesPerView prop ist auf 2 gesetzt, wodurch das Swiper Komponente zum gleichzeitigen Anzeigen von zwei Folien.

Schließlich die Schleife prop gibt an, ob die Folien eine Endlosschleife bilden sollen oder nicht. In diesem Beispiel werden die Folien in einer Endlosschleife wiederholt, da die Schleife Prop-Wert ist WAHR.

Konfigurieren Ihrer Swipe-Schnittstellen mit Modulen

Sie können das Verhalten Ihrer wischbaren Oberfläche mit weiter konfigurieren JavaScript-Module bereitgestellt von der Swiper-Bibliothek. Einige der bereitgestellten Module sind Navigation, Automatisches Abspielen, Seitennummerierung, Und Scrollleiste.

Um eines dieser Module in Ihrer Anwendung verwenden zu können, müssen Sie es aus der Swiper-Bibliothek importieren. Sie sollten auch die entsprechenden CSS-Stile für die Module importieren und deren Namen an die übergeben Swiper Komponente mit der Module Stütze.

So können Sie zum Beispiel das verwenden Navigation Modul zum Konfigurieren Ihrer wischbaren Schnittstellen:

importieren Reagieren aus"reagieren";
importieren { Swiper, SwiperSlide } aus„Swiper/Reagieren“;
importieren {Navigation} aus„Swiper“;
importieren„swiper/css“;
importieren„swiper/css/navigation“;
FunktionApp() {
zurückkehren (



 spaceBetween={30}
 slidesPerView={2}
 module={[Navigation]}
 Schleife={WAHR}
 navigation={WAHR}
 >
<divKlassenname="Element">Element 1div></SwiperSlide>
<divKlassenname="Element">Element 2div></SwiperSlide>
<divKlassenname="Element">Element 3div></SwiperSlide>
<divKlassenname="Element">Element 4div></SwiperSlide>
 </Swiper>
 </div>
 );
}
ExportStandard App;

Dieser Codeblock importiert die Navigation Modul und seinen CSS-Stil und gibt dann das Modul im an Module Stütze des Swiper Komponente. Der Module prop aktiviert und konfiguriert die von der Swiper-Bibliothek bereitgestellten Module.

Das Navigationsmodul stellt Navigationsfunktionen für die Swiper-Komponente bereit. Es fügt Pfeilschaltflächen zum vorherigen und nächsten Pfeil hinzu, auf die Sie klicken oder tippen können, um zur vorherigen oder nächsten Folie zu wechseln.

Der Navigation Der Prop-Wert ist wahr, was dazu führt, dass die Schaltflächen „Zurück“ und „Weiter“ auf dem Bildschirm angezeigt werden.

Konfigurieren von Swipe-Schnittstellen mit AutoPlay

Der Automatisches Abspielen Mit dem Modul kann der Schieberegler automatisch zwischen Folien wechseln, ohne dass der Benutzer eingreifen muss.

Hier ist ein Beispiel dafür, wie Sie Ihre wischbare Oberfläche mithilfe von konfigurieren Automatisches Abspielen Modul:

importieren Reagieren aus"reagieren";
importieren { Swiper, SwiperSlide } aus„Swiper/Reagieren“;
importieren { Automatisches Abspielen } aus„Swiper“;
importieren„swiper/css“;
importieren„swiper/css/autoplay“;
FunktionApp() {
zurückkehren (



 spaceBetween={30}
 slidesPerView={2}
 module={[Autoplay]}
 Schleife={WAHR}
 Autoplay={{ Verzögerung: 3000 }}
 >
<divKlassenname="Element">Element 1div></SwiperSlide>
<divKlassenname="Element">Element 2div></SwiperSlide>
<divKlassenname="Element">Element 3div></SwiperSlide>
<divKlassenname="Element">Element 4div></SwiperSlide>
 </Swiper>
 </div>
 );
}
ExportStandard App;

Verwendung der automatisches Abspielen prop, Sie können die angeben Verzögerung; in diesem Fall ist es auf 3000 Millisekunden eingestellt.

Konfigurieren von wischbaren Schnittstellen mit Paginierung

Ein weiteres wichtiges Swiper-Modul ist Seitennummerierung. Der Seitennummerierung Mit dem Modul können Sie Paginierungsaufzählungszeichen oder Fortschrittsbalkenanzeigen zum Schieberegler hinzufügen und Benutzern eine visuelle Darstellung der Anzahl der Folien und ihrer aktuellen Position innerhalb des Schiebereglers geben.

Um das zu nutzen Seitennummerierung Modul müssen Sie es importieren und in das Modul einbinden Module Stütze des Swiper Komponente:

importieren Reagieren aus"reagieren";
importieren { Swiper, SwiperSlide } aus„Swiper/Reagieren“;
importieren { Seitennummerierung } aus„Swiper“;
importieren„swiper/css“;
importieren„Swiper/CSS/Paginierung“;
FunktionApp() {
zurückkehren (



 spaceBetween={30}
 slidesPerView={2}
 module={[Paginierung]}
 Schleife={WAHR}
 Paginierung={{ anklickbar: WAHR }}
 >
<divKlassenname="Element">Element 1div></SwiperSlide>
<divKlassenname="Element">Element 2div></SwiperSlide>
<divKlassenname="Element">Element 3div></SwiperSlide>
<divKlassenname="Element">Element 4div></SwiperSlide>
 </Swiper>
 </div>
 );
}
ExportStandard App;

Dieser Codeblock stellt die Paginierungsfunktionalität bereit Seitennummerierung Modul. Außerdem können Benutzer auf klicken Seitennummerierung Kugeln durch Einstellen der anklickbar Eigentum der Seitennummerierung prop zu wahr.

Zusätzlich zur Swiper-Bibliothek Seitennummerierung Modul, reagieren-paginieren ist eine weitere hervorragende Option zum Erstellen einer Paginierung in Ihrer React-Anwendung.

Erstellen barrierefreier Anwendungen mit React

Wischbare Oberflächen verbessern das Benutzererlebnis Ihrer Anwendung für Touchscreen-Benutzer. Swiper bietet viel Flexibilität und Sie können es ganz einfach an die Anforderungen Ihrer App anpassen.

Verschiedene UI-Bibliotheken können dazu beitragen, Ihre React-Anwendungen zugänglicher zu machen. Diese Bibliotheken stellen Features und Funktionen bereit, die das Benutzererlebnis Ihrer Anwendung verbessern.