Hvordan lage sveipbare grensesnitt i React-applikasjonen med Swiper

Etter hvert som mobile enheter blir mer populære, har sveipbare grensesnitt blitt en standard måte å samhandle med applikasjoner på. Sveipbare grensesnitt er avgjørende for å gi den beste brukeropplevelsen til mobilbrukere.

Swiper er et allsidig bibliotek som lar deg lage sveipbare grensesnitt i React-applikasjonene dine. Oppdag hvordan du kan lage sveipbare grensesnitt i React-applikasjonen din ved å bruke Swiper.

Installerer Swiper

Swiper er et av de mange bibliotekene du kan bruke til å tilpasse React-applikasjonen din. For å komme i gang med Swiper må du installere den i React-applikasjonen din. Du kan gjøre dette med følgende terminalkommando som du bør kjøre i prosjektets rotkatalog:

npm installer swiper

Når du har installert Swiper, kan du bruke den i applikasjonen din.

Opprette sveipbare grensesnitt

Etter å ha installert Swiper i React-applikasjonen din, kan du lage sveipbare grensesnitt. Start med å importere

Swiper-komponenten er kjernekomponenten i Swiper-biblioteket. Den definerer de sveipbare elementenes struktur, oppførsel og funksjonalitet. SwiperSlide-komponenten er en underordnet komponent av Swiper-komponenten. Den definerer individuelle lysbilder som er innenfor Swiper-komponenten.

Her er et eksempel på et sveipbart grensesnitt som bruker Swiper- og SwiperSlide-komponentene:

import Reagere fra'reagere';
import { Swiper, SwiperSlide} fra"sveiper/reager";
import'swiper/css';
funksjonApp() {
komme tilbake (




<divklassenavn='element'>Element 1div></SwiperSlide>
<divklassenavn='element'>Element 2div></SwiperSlide>
<divklassenavn='element'>Element 3div></SwiperSlide>
<divklassenavn='element'>Element 4div></SwiperSlide>
 </Swiper>
 </div>
 )
}
eksportmisligholde App

I tillegg til det Sveiper og SwiperSlide komponenter, importerer denne kodeblokken standard stilarket for Swiper ved å bruke swiper/css modul.

Eksemplet vikler deretter en Swiper-komponent rundt fire SwiperSlide-underordnede komponenter. Hver SwiperSlide inneholder en div element med klassenavn Egenskap. Du kan bruke klassenavnet til å style div-elementene:

.element {
inline-størrelse: 100px;
grense-radius: 12px;
polstring: 1rem;
farge: #333333;
bakgrunnsfarge: #e2e2e2;
font-familie: kursiv;
}

Tilpasse det sveipbare grensesnittet ditt

Etter å ha opprettet et sveipbart grensesnitt, kan du forbedre utseendet og funksjonaliteten for å passe dine behov.

Med Swiper kan du tilpasse grensesnittets oppførsel og utseende ved hjelp av ulike alternativer. Du sender disse alternativene til Sveiper komponent som rekvisitter i React:

import Reagere fra'reagere';
import { Swiper, SwiperSlide} fra"sveiper/reager";
import'swiper/css';
funksjonApp() {
komme tilbake (



 spaceBetween={30}
 slidesPerView={2}
 loop={ ekte }
 >
<divklassenavn='element'>Element 1div></SwiperSlide>
<divklassenavn='element'>Element 2div></SwiperSlide>
<divklassenavn='element'>Element 3div></SwiperSlide>
<divklassenavn='element'>Element 4div></SwiperSlide>
 </Swiper>
 </div>
 )
}
eksportmisligholde App

I dette eksemplet tar Swiper-komponenten inn tre rekvisitter: space Between, slidesPerView, og Løkke. De space Between prop setter avstanden mellom hvert lysbilde, i dette tilfellet 30 piksler.

Bruker slidesPerView prop, kan du angi antall synlige lysbilder samtidig. I dette tilfellet slidesPerView prop er satt til 2 som forårsaker Sveiper komponent for å vise to lysbilder samtidig.

Til slutt, den Løkke prop spesifiserer om lysbildene skal sløyfes uendelig eller ikke. I dette eksemplet vil lysbildene sløyfe uendelig fordi Løkke prop-verdien er ekte.

Konfigurering av sveipbare grensesnitt med moduler

Du kan konfigurere det sveipbare grensesnittets oppførsel ytterligere med JavaScript-moduler levert av Swiper-biblioteket. Noen av modulene den gir er Navigasjon, Auto spill, Paginering, og Rullefelt.

For å bruke noen av disse modulene i applikasjonen din, må du importere dem fra Swiper-biblioteket. Du bør også importere de tilsvarende CSS-stilene for modulene og sende navnene deres til Sveiper komponent ved hjelp av moduler rekvisitt.

Dette er for eksempel hvordan du kan bruke Navigasjon modul for å konfigurere sveipbare grensesnitt:

import Reagere fra"reagere";
import { Swiper, SwiperSlide } fra"sveiper/reager";
import { Navigasjon } fra"sveiper";
import"swiper/css";
import"swiper/css/navigasjon";
funksjonApp() {
komme tilbake (



 spaceBetween={30}
 slidesPerView={2}
 modules={[Navigasjon]}
 loop={ekte}
 navigasjon={ekte}
 >
<divklassenavn="element">Element 1div></SwiperSlide>
<divklassenavn="element">Element 2div></SwiperSlide>
<divklassenavn="element">Element 3div></SwiperSlide>
<divklassenavn="element">Element 4div></SwiperSlide>
 </Swiper>
 </div>
 );
}
eksportmisligholde App;

Denne kodeblokken importerer Navigasjon modulen og dens CSS-stil, spesifiserer deretter modulen i moduler rekvisitt av Sveiper komponent. De moduler prop aktiverer og konfigurerer moduler levert av Swiper-biblioteket.

Navigasjonsmodulen gir navigasjonsfunksjonalitet til Swiper-komponenten. Den legger til forrige og neste pilknapper som du kan klikke eller trykke på for å flytte til forrige eller neste lysbilde.

De navigasjon prop-verdien er sann, noe som vil føre til at forrige og neste knapper vises på skjermen.

Konfigurere sveipbare grensesnitt med AutoPlay

De Auto spill modulen lar glideren skifte mellom lysbildene automatisk uten brukerinteraksjon.

Her er et eksempel på hvordan du konfigurerer det sveipbare grensesnittet ved hjelp av Auto spill modul:

import Reagere fra"reagere";
import { Swiper, SwiperSlide } fra"sveiper/reager";
import { Auto spill } fra"sveiper";
import"swiper/css";
import"swiper/css/autoplay";
funksjonApp() {
komme tilbake (



 spaceBetween={30}
 slidesPerView={2}
 modules={[Autospill]}
 loop={ekte}
 autoplay={{ forsinkelse: 3000 }}
 >
<divklassenavn="element">Element 1div></SwiperSlide>
<divklassenavn="element">Element 2div></SwiperSlide>
<divklassenavn="element">Element 3div></SwiperSlide>
<divklassenavn="element">Element 4div></SwiperSlide>
 </Swiper>
 </div>
 );
}
eksportmisligholde App;

Bruker Auto spill prop, kan du spesifisere forsinkelse; i dette tilfellet er den satt til 3000 millisekunder.

Konfigurere sveipbare grensesnitt med paginering

En annen viktig Swiper-modul er Paginering. De Paginering modulen lar deg legge til pagineringskuler eller fremdriftsindikatorer til glidebryteren, og gir brukerne en visuell representasjon av antall lysbilder og deres nåværende posisjon i skyveknappen.

For å bruke Paginering modul, må du importere den og inkludere den i moduler rekvisitt av Sveiper komponent:

import Reagere fra"reagere";
import { Swiper, SwiperSlide } fra"sveiper/reager";
import { Paginering } fra"sveiper";
import"swiper/css";
import"swiper/css/paginering";
funksjonApp() {
komme tilbake (



 spaceBetween={30}
 slidesPerView={2}
 modules={[Pagement]}
 loop={ekte}
 paginering={{ klikkbar: ekte }}
 >
<divklassenavn="element">Element 1div></SwiperSlide>
<divklassenavn="element">Element 2div></SwiperSlide>
<divklassenavn="element">Element 3div></SwiperSlide>
<divklassenavn="element">Element 4div></SwiperSlide>
 </Swiper>
 </div>
 );
}
eksportmisligholde App;

Denne kodeblokken gir pagineringsfunksjonaliteten med Paginering modul. Den lar også brukere klikke på paginering kuler ved å stille inn klikkbar eiendommen til paginering prop til sant.

I tillegg til Swiper-bibliotekets paginering modul, reagere-paginer er et annet utmerket alternativ for å lage paginering i React-applikasjonen din.

Bygg tilgjengelige applikasjoner med React

Sveipbare grensesnitt forbedrer brukeropplevelsen av applikasjonen din for brukere av berøringsskjerm. Swiper tilbyr mye fleksibilitet, og du kan enkelt tilpasse den etter behovene til appen din.

Ulike UI-biblioteker kan bidra til å gjøre React-applikasjonene dine mer tilgjengelige. Disse bibliotekene gir funksjoner og funksjonalitet som forbedrer brukeropplevelsen av applikasjonen din.