Jak vytvořit Swipeable rozhraní ve vaší aplikaci React pomocí Swiper

S tím, jak se mobilní zařízení stávají stále populárnějšími, se rozhraní s možností přejetí prstem stala standardním způsobem interakce s aplikacemi. Přejížděná rozhraní jsou nezbytná pro poskytování nejlepšího uživatelského zážitku pro mobilní uživatele.

Swiper je všestranná knihovna, která vám umožňuje vytvářet swipovací rozhraní ve vašich aplikacích React. Zjistěte, jak můžete ve své aplikaci React vytvořit rozhraní s možností přejetí prstem pomocí Swiper.

Instalace Swiperu

Swiper je jednou z mnoha knihoven, které můžete použít k přizpůsobení aplikace React. Chcete-li začít s Swiperem, musíte si jej nainstalovat do aplikace React. Můžete to udělat pomocí následujícího příkazu terminálu, který byste měli spustit v kořenovém adresáři vašeho projektu:

npm install swiper

Jakmile nainstalujete Swiper, můžete jej používat ve své aplikaci.

Vytváření swipeable rozhraní

Po instalaci Swiper do vaší aplikace React můžete vytvářet rozhraní s možností přejetí prstem. Začněte importem

Komponenta Swiper je základní komponentou knihovny Swiper. Definuje strukturu, chování a funkčnost swipeable prvků. Komponenta SwiperSlide je podřízenou komponentou komponenty Swiper. Definuje jednotlivé snímky, které jsou v rámci komponenty Swiper.

Zde je příklad rozhraní s možností přejetí prstem pomocí komponent Swiper a SwiperSlide:

import Reagovat z'reagovat';
import { Swiper, SwiperSlide} z"swiper/react";
import'swiper/css';
funkceAplikace() {
vrátit se (




<divjméno třídy='živel'>Prvek 1div></SwiperSlide>
<divjméno třídy='živel'>Prvek 2div></SwiperSlide>
<divjméno třídy='živel'>Prvek 3div></SwiperSlide>
<divjméno třídy='živel'>Prvek 4div></SwiperSlide>
 </Swiper>
 </div>
 )
}
vývoznívýchozí Aplikace

Navíc k Swiper a SwiperSlide tento blok kódu importuje výchozí šablonu stylů pro Swiper pomocí swiper/css modul.

V příkladu pak komponenta Swiper obtéká čtyři podřízené komponenty SwiperSlide. Každý SwiperSlide obsahuje a div prvek s jméno třídy atribut. Ke stylování prvků div můžete použít className:

.živel {
inline-size: 100px;
hraniční poloměr: 12px;
vycpávka: 1rem;
barva: #333333;
barva pozadí: #e2e2e2;
rodina písem: kurzívní;
}

Přizpůsobení vašeho swipeable rozhraní

Po úspěšném vytvoření swipeable rozhraní můžete vylepšit jeho vzhled a funkčnost tak, aby vyhovovala vašim požadavkům.

Pomocí Swiperu můžete přizpůsobit chování a vzhled rozhraní pomocí různých možností. Tyto možnosti předáte Swiper komponenta jako rekvizity v Reactu:

import Reagovat z'reagovat';
import { Swiper, SwiperSlide} z"swiper/react";
import'swiper/css';
funkceAplikace() {
vrátit se (



 mezeraMezi={30}
 slidesPerView={2}
 smyčka={ skutečný }
 >
<divjméno třídy='živel'>Prvek 1div></SwiperSlide>
<divjméno třídy='živel'>Prvek 2div></SwiperSlide>
<divjméno třídy='živel'>Prvek 3div></SwiperSlide>
<divjméno třídy='živel'>Prvek 4div></SwiperSlide>
 </Swiper>
 </div>
 )
}
vývoznívýchozí Aplikace

V tomto příkladu má komponenta Swiper tři rekvizity: prostor Mezi, slidesPerView, a smyčka. The prostor Mezi prop nastavuje mezeru mezi jednotlivými snímky, v tomto případě 30 pixelů.

Za použití slidesPerView prop, můžete nastavit počet viditelných snímků najednou. V tomto případě je slidesPerView prop je nastaven na 2, což způsobuje Swiper komponentu pro zobrazení dvou snímků současně.

Konečně, smyčka prop určuje, zda se mají snímky opakovat do nekonečna nebo ne. V tomto příkladu se snímky budou nekonečně opakovat, protože smyčka hodnota prop je skutečný.

Konfigurace swipeable rozhraní pomocí modulů

Můžete dále nakonfigurovat chování vašeho swipeable rozhraní pomocí JavaScript moduly poskytuje knihovna Swiper. Některé z modulů, které poskytuje, jsou Navigace, Automatické přehrávání, Stránkování, a Posuvník.

Chcete-li použít některý z těchto modulů ve své aplikaci, musíte je importovat z knihovny Swiper. Měli byste také importovat odpovídající styly CSS pro moduly a předat jejich názvy Swiper součást pomocí moduly podpěra.

Například takto můžete použít Navigace modul pro konfiguraci vašich swipeable rozhraní:

import Reagovat z"reagovat";
import { Swiper, SwiperSlide } z"swiper/react";
import { Navigace } z"swiper";
import"swiper/css";
import"swiper/css/navigace";
funkceAplikace() {
vrátit se (



 mezeraMezi={30}
 slidesPerView={2}
 modules={[Navigation]}
 smyčka={skutečný}
 navigace={skutečný}
 >
<divjméno třídy="živel">Prvek 1div></SwiperSlide>
<divjméno třídy="živel">Prvek 2div></SwiperSlide>
<divjméno třídy="živel">Prvek 3div></SwiperSlide>
<divjméno třídy="živel">Prvek 4div></SwiperSlide>
 </Swiper>
 </div>
 );
}
vývoznívýchozí Aplikace;

Tento blok kódu importuje Navigace modul a jeho styl CSS, pak specifikuje modul v moduly podpěra toho Swiper komponent. The moduly prop povoluje a konfiguruje moduly poskytované knihovnou Swiper.

Modul Navigace poskytuje navigační funkce pro komponentu Swiper. Přidá předchozí a další tlačítka se šipkami, na která můžete kliknout nebo klepnout a přesunout se na předchozí nebo další snímek.

The navigace hodnota prop je true, což způsobí, že se na obrazovce zobrazí předchozí a následující tlačítka.

Konfigurace rozhraní s možností přejetí prstem pomocí automatického přehrávání

The Automatické přehrávání modul umožňuje posuvníku automaticky přecházet mezi snímky bez zásahu uživatele.

Zde je příklad, jak nakonfigurovat rozhraní s možností přejetí prstem pomocí Automatické přehrávání modul:

import Reagovat z"reagovat";
import { Swiper, SwiperSlide } z"swiper/react";
import { Automatické přehrávání } z"swiper";
import"swiper/css";
import"swiper/css/autoplay";
funkceAplikace() {
vrátit se (



 mezeraMezi={30}
 slidesPerView={2}
 modules={[Automatické přehrávání]}
 smyčka={skutečný}
 automatické přehrávání={{ zpoždění: 3000 }}
 >
<divjméno třídy="živel">Prvek 1div></SwiperSlide>
<divjméno třídy="živel">Prvek 2div></SwiperSlide>
<divjméno třídy="živel">Prvek 3div></SwiperSlide>
<divjméno třídy="živel">Prvek 4div></SwiperSlide>
 </Swiper>
 </div>
 );
}
vývoznívýchozí Aplikace;

Za použití automatické přehrávání vrtule, můžete specifikovat zpoždění; v tomto případě je nastavena na 3000 milisekund.

Konfigurace swipeable rozhraní se stránkováním

Dalším důležitým modulem Swiper je Stránkování. The Stránkování modul umožňuje přidat do posuvníku odrážky stránkování nebo indikátory ukazatele průběhu, což uživatelům poskytuje vizuální znázornění počtu snímků a jejich aktuální pozice v posuvníku.

Chcete-li použít Stránkování modul, musíte jej importovat a zahrnout do moduly podpěra toho Swiper komponent:

import Reagovat z"reagovat";
import { Swiper, SwiperSlide } z"swiper/react";
import { Stránkování } z"swiper";
import"swiper/css";
import"swiper/css/stránkování";
funkceAplikace() {
vrátit se (



 mezeraMezi={30}
 slidesPerView={2}
 moduly={[Paginace]}
 smyčka={skutečný}
 stránkování={{ klikací: skutečný }}
 >
<divjméno třídy="živel">Prvek 1div></SwiperSlide>
<divjméno třídy="živel">Prvek 2div></SwiperSlide>
<divjméno třídy="živel">Prvek 3div></SwiperSlide>
<divjméno třídy="živel">Prvek 4div></SwiperSlide>
 </Swiper>
 </div>
 );
}
vývoznívýchozí Aplikace;

Tento blok kódu poskytuje funkci stránkování s Stránkování modul. Umožňuje také uživatelům kliknout na stránkování kulky nastavením klikací vlastnictvím stránkování prop to pravda.

Kromě knihovny Swiper stránkování modul, reagovat-stránkovat je další vynikající možností pro vytváření stránkování ve vaší aplikaci React.

Vytváření přístupných aplikací pomocí React

Posouvatelná rozhraní zlepšují uživatelský dojem z vaší aplikace pro uživatele dotykové obrazovky. Swiper nabízí spoustu flexibility a můžete si jej snadno přizpůsobit podle potřeb vaší aplikace.

Různé knihovny uživatelského rozhraní vám mohou pomoci zpřístupnit vaše aplikace React. Tyto knihovny poskytují funkce a funkce, které vylepšují uživatelské prostředí vaší aplikace.