Jak tworzyć przesuwane interfejsy w aplikacji React za pomocą Swiper

W miarę jak urządzenia mobilne stają się coraz bardziej popularne, przeciągane interfejsy stały się standardowym sposobem interakcji z aplikacjami. Przesuwane interfejsy są niezbędne, aby zapewnić najlepszą obsługę użytkownikom mobilnym.

Swiper to wszechstronna biblioteka, która pozwala tworzyć przesuwane interfejsy w aplikacjach React. Dowiedz się, jak możesz tworzyć przesuwane interfejsy w swojej aplikacji React za pomocą Swipera.

Instalowanie Swipera

Swiper to jedna z wielu bibliotek, których możesz użyć do dostosowania aplikacji React. Aby rozpocząć pracę z Swiperem, musisz zainstalować go w swojej aplikacji React. Możesz to zrobić za pomocą następującego polecenia terminala, które powinieneś uruchomić w katalogu głównym projektu:

npm zainstaluj suwak

Po zainstalowaniu Swipera możesz go używać w swojej aplikacji.

Tworzenie przesuwanych interfejsów

Po zainstalowaniu Swipera w aplikacji React możesz tworzyć interfejsy przesuwane. Zacznij od zaimportowania pliku

Komponent Swiper jest podstawowym komponentem biblioteki Swiper. Definiuje strukturę, zachowanie i funkcjonalność przesuwanych elementów. Komponent SwiperSlide jest komponentem podrzędnym komponentu Swiper. Definiuje poszczególne slajdy, które znajdują się w komponencie Swiper.

Oto przykład przesuwanego interfejsu przy użyciu komponentów Swiper i SwiperSlide:

import Reagować z'reagować';
import { Swiper, SwiperSlide} z„przesuń palcem / zareaguj”;
import„przesuwacz/css”;
funkcjonowaćAplikacja() {
powrót (




<dzNazwa klasy='element'>Pierwiastek 1dz></SwiperSlide>
<dzNazwa klasy='element'>Pierwiastek 2dz></SwiperSlide>
<dzNazwa klasy='element'>Pierwiastek 3dz></SwiperSlide>
<dzNazwa klasy='element'>Pierwiastek 4dz></SwiperSlide>
 </Swiper>
 </div>
 )
}
eksportdomyślny Aplikacja

Dodatkowo Wycieraczka I SwiperSlajd Components, ten blok kodu importuje domyślny arkusz stylów dla Swiper przy użyciu swiper/css moduł.

Przykład obejmuje następnie komponent Swiper wokół czterech komponentów podrzędnych SwiperSlide. Każdy SwiperSlide zawiera dz element z Nazwa klasy atrybut. Możesz użyć className do nadania stylu elementom div:

.element {
rozmiar w wierszu: 100piks;
promień granicy: 12piks;
wyściółka: 1Rem;
kolor: #333333;
kolor tła: #e2e2e2;
rodzina czcionek: kursywny;
}

Dostosowywanie przesuwanego interfejsu

Po pomyślnym utworzeniu interfejsu z możliwością przesuwania możesz dostosować jego wygląd i funkcjonalność do swoich wymagań.

Dzięki Swiper możesz dostosować zachowanie i wygląd interfejsu za pomocą różnych opcji. Przekazujesz te opcje do Wycieraczka składnik jako rekwizyty w React:

import Reagować z'reagować';
import { Swiper, SwiperSlide} z„przesuń palcem / zareaguj”;
import„przesuwacz/css”;
funkcjonowaćAplikacja() {
powrót (



 spacjaMiędzy={30}
 slidesPerView={2}
 pętla={ PRAWDA }
 >
<dzNazwa klasy='element'>Pierwiastek 1dz></SwiperSlide>
<dzNazwa klasy='element'>Pierwiastek 2dz></SwiperSlide>
<dzNazwa klasy='element'>Pierwiastek 3dz></SwiperSlide>
<dzNazwa klasy='element'>Pierwiastek 4dz></SwiperSlide>
 </Swiper>
 </div>
 )
}
eksportdomyślny Aplikacja

W tym przykładzie komponent Swiper przyjmuje trzy rekwizyty: przestrzeń pomiędzy, slajdy na widok, I pętla. The przestrzeń pomiędzy prop ustawia odstęp między każdym slajdem, w tym przypadku 30 pikseli.

Używając slajdy na widok prop, możesz ustawić liczbę slajdów widocznych jednocześnie. W tym przypadku slajdy na widok prop jest ustawiony na 2, powodując Wycieraczka komponent do jednoczesnego wyświetlania dwóch slajdów.

Wreszcie, pętla prop określa, czy slajdy powinny zapętlać się w nieskończoność, czy nie. W tym przykładzie slajdy będą się zapętlać w nieskończoność, ponieważ pętla wartość rekwizytu to PRAWDA.

Konfigurowanie przesuwanych interfejsów za pomocą modułów

Możesz dodatkowo skonfigurować zachowanie przesuwanego interfejsu za pomocą moduły JavaScriptu dostarczone przez bibliotekę Swiper. Niektóre z modułów, które zapewnia, są Nawigacja, Automatyczne odtwarzanie, Paginacja, I Pasek przewijania.

Aby użyć dowolnego z tych modułów w swojej aplikacji, musisz zaimportować je z biblioteki Swiper. Powinieneś także zaimportować odpowiednie style CSS dla modułów i przekazać ich nazwy do Wycieraczka składnik za pomocą moduły rekwizyt.

Na przykład w ten sposób możesz użyć Nawigacja moduł do konfigurowania przesuwanych interfejsów:

import Reagować z"reagować";
import { Swiper, SwiperSlide } z„przesuń palcem / zareaguj”;
import { Nawigacja} z„wycieraczka”;
import"swiper/css";
import„swiper/css/nawigacja”;
funkcjonowaćAplikacja() {
powrót (



 spacjaMiędzy={30}
 slidesPerView={2}
 moduły={[Nawigacja]}
 pętla={PRAWDA}
 nawigacja={PRAWDA}
 >
<dzNazwa klasy="element">Pierwiastek 1dz></SwiperSlide>
<dzNazwa klasy="element">Pierwiastek 2dz></SwiperSlide>
<dzNazwa klasy="element">Pierwiastek 3dz></SwiperSlide>
<dzNazwa klasy="element">Pierwiastek 4dz></SwiperSlide>
 </Swiper>
 </div>
 );
}
eksportdomyślny Aplikacja;

Ten blok kodu importuje plik Nawigacja module i jego stylu CSS, a następnie określa moduł w pliku moduły podpora Wycieraczka część. The moduły prop włącza i konfiguruje moduły dostarczane przez bibliotekę Swiper.

Moduł Nawigacja zapewnia funkcjonalność nawigacji dla komponentu Swiper. Dodaje poprzednie i następne przyciski strzałek, które można kliknąć lub stuknąć, aby przejść do poprzedniego lub następnego slajdu.

The nawigacja wartość prop jest równa true, co spowoduje wyświetlenie przycisków poprzedni i następny na ekranie.

Konfigurowanie przesuwanych interfejsów z funkcją autoodtwarzania

The Automatyczne odtwarzanie moduł pozwala suwakowi na automatyczne przechodzenie między slajdami bez interakcji użytkownika.

Oto przykład, jak skonfigurować przesuwany interfejs za pomocą Automatyczne odtwarzanie moduł:

import Reagować z"reagować";
import { Swiper, SwiperSlide } z„przesuń palcem / zareaguj”;
import { Automatyczne odtwarzanie } z„wycieraczka”;
import"swiper/css";
import„swiper/css/autoodtwarzanie”;
funkcjonowaćAplikacja() {
powrót (



 spacjaMiędzy={30}
 slidesPerView={2}
 moduły={[Autoodtwarzanie]}
 pętla={PRAWDA}
 autoodtwarzanie={{ opóźnienie: 3000 }}
 >
<dzNazwa klasy="element">Pierwiastek 1dz></SwiperSlide>
<dzNazwa klasy="element">Pierwiastek 2dz></SwiperSlide>
<dzNazwa klasy="element">Pierwiastek 3dz></SwiperSlide>
<dzNazwa klasy="element">Pierwiastek 4dz></SwiperSlide>
 </Swiper>
 </div>
 );
}
eksportdomyślny Aplikacja;

Używając Automatyczne odtwarzanie prop, możesz określić opóźnienie; w tym przypadku jest ustawiony na 3000 milisekund.

Konfigurowanie przesuwanych interfejsów z podziałem na strony

Kolejnym ważnym modułem Swiper jest Paginacja. The Paginacja moduł pozwala dodawać punktory stronicowania lub wskaźniki paska postępu do suwaka, dając użytkownikom wizualną reprezentację liczby slajdów i ich aktualnej pozycji w suwaku.

Aby użyć Paginacja module, musisz go zaimportować i dołączyć do pliku moduły podpora Wycieraczka część:

import Reagować z"reagować";
import { Swiper, SwiperSlide } z„przesuń palcem / zareaguj”;
import { Paginacja } z„wycieraczka”;
import"swiper/css";
import„swiper/css/paginacja”;
funkcjonowaćAplikacja() {
powrót (



 spacjaMiędzy={30}
 slidesPerView={2}
 moduły={[Paginacja]}
 pętla={PRAWDA}
 paginacja={{ możliwe do kliknięcia: PRAWDA }}
 >
<dzNazwa klasy="element">Pierwiastek 1dz></SwiperSlide>
<dzNazwa klasy="element">Pierwiastek 2dz></SwiperSlide>
<dzNazwa klasy="element">Pierwiastek 3dz></SwiperSlide>
<dzNazwa klasy="element">Pierwiastek 4dz></SwiperSlide>
 </Swiper>
 </div>
 );
}
eksportdomyślny Aplikacja;

Ten blok kodu zapewnia funkcjonalność stronicowania z Paginacja moduł. Pozwala również użytkownikom kliknąć paginacja pociski, ustawiając możliwe do kliknięcia własność r paginacja prop do prawdy.

Oprócz biblioteki Swiper paginacja moduł, paginacja reakcji to kolejna doskonała opcja do tworzenia paginacji w aplikacji React.

Tworzenie dostępnych aplikacji za pomocą React

Przesuwane interfejsy poprawiają komfort korzystania z aplikacji przez użytkowników ekranu dotykowego. Swiper oferuje dużą elastyczność i możesz łatwo dostosować go do potrzeb swojej aplikacji.

Różne biblioteki interfejsu użytkownika mogą pomóc w zwiększeniu dostępności aplikacji React. Biblioteki te udostępniają funkcje i funkcje, które poprawiają komfort użytkowania aplikacji.