Lär dig hur det här bekväma biblioteket kan möjliggöra ett svepbart gränssnitt i dina appar med minimal ansträngning.
När mobila enheter blir mer populära har svepbara gränssnitt blivit ett standardsätt att interagera med applikationer. Svepbara gränssnitt är avgörande för att ge mobilanvändare den bästa användarupplevelsen.
Swiper är ett mångsidigt bibliotek som låter dig skapa svepbara gränssnitt i dina React-applikationer. Upptäck hur du kan skapa svepbara gränssnitt i din React-applikation med Swiper.
Installerar Swiper
Swiper är ett av de många bibliotek du kan använda för att anpassa din React-applikation. För att komma igång med Swiper måste du installera den i din React-applikation. Du kan göra detta med följande terminalkommando som du ska köra i ditt projekts rotkatalog:
npm installera swiper
När du har installerat Swiper kan du använda den i din applikation.
Skapa svepbara gränssnitt
Efter att ha installerat Swiper i din React-applikation kan du skapa svepbara gränssnitt. Börja med att importera Swiper och SwiperSlide komponenter från Swiper-biblioteket.
Swiper-komponenten är kärnkomponenten i Swiper-biblioteket. Den definierar de svepbara elementens struktur, beteende och funktionalitet. SwiperSlide-komponenten är en underordnad komponent av Swiper-komponenten. Den definierar individuella bilder som finns inom Swiper-komponenten.
Här är ett exempel på ett svepbart gränssnitt som använder komponenterna Swiper och SwiperSlide:
importera Reagera från'reagera';
importera { Swiper, SwiperSlide} från"swiper/reagera";
importera'swiper/css';fungeraApp() {
lämna tillbaka (<divklassnamn='element'>Element 1div></SwiperSlide> <divklassnamn='element'>Element 2div></SwiperSlide> <divklassnamn='element'>Element 3div></SwiperSlide> <divklassnamn='element'>Element 4div></SwiperSlide>
</Swiper>
</div>
)
}
exporterastandard App
Utöver Swiper och SwiperSlide komponenter, importerar detta kodblock standardformatmallen för Swiper med hjälp av swiper/css modul.
Exemplet lindar sedan en Swiper-komponent runt fyra underordnade SwiperSlide-komponenter. Varje SwiperSlide innehåller en div element med klassnamn attribut. Du kan använda className för att utforma div-elementen:
.element {
inline-storlek: 100px;
gräns-radie: 12px;
stoppning: 1rem;
Färg: #333333;
bakgrundsfärg: #e2e2e2;
typsnittsfamilj: kursiv;
}
Anpassa ditt svepbara gränssnitt
Efter att framgångsrikt skapat ett svepbart gränssnitt kan du förbättra dess utseende och funktionalitet för att passa dina krav.
Med Swiper kan du anpassa gränssnittets beteende och utseende med hjälp av olika alternativ. Du skickar dessa alternativ till Swiper komponent som rekvisita i React:
importera Reagera från'reagera';
importera { Swiper, SwiperSlide} från"swiper/reagera";
importera'swiper/css';fungeraApp() {
lämna tillbaka (
spaceBetween={30}
slidesPerView={2}
loop={ Sann }
><divklassnamn='element'>Element 1div></SwiperSlide> <divklassnamn='element'>Element 2div></SwiperSlide> <divklassnamn='element'>Element 3div></SwiperSlide> <divklassnamn='element'>Element 4div></SwiperSlide>
</Swiper>
</div>
)
}
exporterastandard App
I det här exemplet tar Swiper-komponenten in tre rekvisita: space Between, slidesPerView, och slinga. De space Between prop ställer in utrymmet mellan varje bild, i det här fallet 30 pixlar.
Använda slidesPerView prop, du kan ställa in antalet synliga bilder på en gång. I det här fallet slidesPerView prop är inställd på 2 vilket orsakar Swiper komponent för att visa två bilder samtidigt.
Slutligen slinga prop anger om bilderna ska loopa oändligt eller inte. I det här exemplet kommer bilderna att loopa oändligt eftersom slinga prop värdet är Sann.
Konfigurera dina svepbara gränssnitt med moduler
Du kan ytterligare konfigurera ditt svepbara gränssnitts beteende med JavaScript-moduler tillhandahålls av Swiper-biblioteket. Några av modulerna den tillhandahåller är Navigering, Autospela, Paginering, och Rullningslist.
För att använda någon av dessa moduler i din applikation måste du importera dem från Swiper-biblioteket. Du bör också importera motsvarande CSS-stilar för modulerna och skicka deras namn till Swiper komponent med hjälp av moduler stötta.
Till exempel, så här kan du använda Navigering modul för att konfigurera dina svepbara gränssnitt:
importera Reagera från"reagera";
importera { Swiper, SwiperSlide } från"swiper/reagera";
importera { Navigation } från"swiper";
importera"swiper/css";
importera"swiper/css/navigation";fungeraApp() {
lämna tillbaka (
spaceBetween={30}
slidesPerView={2}
modules={[Navigation]}
loop={Sann}
navigation={Sann}
><divklassnamn="element">Element 1div></SwiperSlide> <divklassnamn="element">Element 2div></SwiperSlide> <divklassnamn="element">Element 3div></SwiperSlide> <divklassnamn="element">Element 4div></SwiperSlide>
</Swiper>
</div>
);
}
exporterastandard App;
Detta kodblock importerar Navigering modulen och dess CSS-stil, anger sedan modulen i moduler rekvisita av Swiper komponent. De moduler prop aktiverar och konfigurerar moduler som tillhandahålls av Swiper-biblioteket.
Navigationsmodulen ger navigeringsfunktioner till Swiper-komponenten. Den lägger till föregående och nästa pilknappar som du kan klicka eller trycka på för att flytta till föregående eller nästa bild.
De navigering prop-värdet är sant vilket gör att föregående och nästa knappar visas på skärmen.
Konfigurera svepbara gränssnitt med AutoPlay
De Autospela modulen låter reglaget växla mellan bilderna automatiskt utan användarinteraktion.
Här är ett exempel på hur du konfigurerar ditt svepbara gränssnitt med hjälp av Autospela modul:
importera Reagera från"reagera";
importera { Swiper, SwiperSlide } från"swiper/reagera";
importera { Autospela } från"swiper";
importera"swiper/css";
importera"swiper/css/autoplay";fungeraApp() {
lämna tillbaka (
spaceBetween={30}
slidesPerView={2}
modules={[Autoplay]}
loop={Sann}
autoplay={{ dröjsmål: 3000 }}
><divklassnamn="element">Element 1div></SwiperSlide> <divklassnamn="element">Element 2div></SwiperSlide> <divklassnamn="element">Element 3div></SwiperSlide> <divklassnamn="element">Element 4div></SwiperSlide>
</Swiper>
</div>
);
}
exporterastandard App;
Använda autospela prop, kan du ange dröjsmål; i det här fallet är den inställd på 3000 millisekunder.
Konfigurera svepbara gränssnitt med paginering
En annan viktig Swiper-modul är Paginering. De Paginering modulen låter dig lägga till sidnumreringspunkter eller förloppsindikatorer till skjutreglaget, vilket ger användarna en visuell representation av antalet bilder och deras nuvarande position inom skjutreglaget.
För att använda Paginering modulen måste du importera den och inkludera den i moduler rekvisita av Swiper komponent:
importera Reagera från"reagera";
importera { Swiper, SwiperSlide } från"swiper/reagera";
importera { Paginering } från"swiper";
importera"swiper/css";
importera"swiper/css/paginering";fungeraApp() {
lämna tillbaka (
spaceBetween={30}
slidesPerView={2}
modules={[Paginering]}
loop={Sann}
paginering={{ klickbar: Sann }}
><divklassnamn="element">Element 1div></SwiperSlide> <divklassnamn="element">Element 2div></SwiperSlide> <divklassnamn="element">Element 3div></SwiperSlide> <divklassnamn="element">Element 4div></SwiperSlide>
</Swiper>
</div>
);
}
exporterastandard App;
Detta kodblock tillhandahåller sideringsfunktionaliteten med Paginering modul. Det tillåter också användare att klicka på paginering kulor genom att ställa in klickbar egendom av paginering prop till sant.
Förutom Swiper-bibliotekets paginering modul, reagera-paginera är ett annat utmärkt alternativ för att skapa paginering i din React-applikation.
Bygger tillgängliga applikationer med React
Svepbara gränssnitt förbättrar användarupplevelsen av din applikation för pekskärmsanvändare. Swiper erbjuder massor av flexibilitet och du kan enkelt anpassa den efter behoven i din app.
Olika UI-bibliotek kan hjälpa till att göra dina React-applikationer mer tillgängliga. Dessa bibliotek tillhandahåller funktioner och funktioner som förbättrar användarupplevelsen av din applikation.
