Come creare interfacce scorrevoli nella tua applicazione React con Swiper

Man mano che i dispositivi mobili diventano più popolari, le interfacce a scorrimento sono diventate un modo standard di interagire con le applicazioni. Le interfacce scorrevoli sono essenziali per fornire la migliore esperienza utente agli utenti mobili.

Swiper è una libreria versatile che ti consente di creare interfacce scorrevoli nelle tue applicazioni React. Scopri come creare interfacce scorrevoli nella tua applicazione React utilizzando Swiper.

Installazione di Swiper

Swiper è una delle tante librerie che puoi utilizzare per personalizzare la tua applicazione React. Per iniziare con Swiper, devi installarlo nella tua applicazione React. Puoi farlo con il seguente comando da terminale che dovresti eseguire nella directory principale del tuo progetto:

npm installa lo swiper

Dopo aver installato Swiper, puoi utilizzarlo nella tua applicazione.

Creazione di interfacce scorrevoli

Dopo aver installato Swiper nella tua applicazione React, puoi creare interfacce scorrevoli. Inizia importando il file Scorri E SwiperSlide componenti dalla libreria Swiper.

Il componente Swiper è il componente principale della libreria Swiper. Definisce la struttura, il comportamento e la funzionalità degli elementi a scorrimento. Il componente SwiperSlide è un componente figlio del componente Swiper. Definisce le singole diapositive che si trovano all'interno del componente Swiper.

Ecco un esempio di un'interfaccia a scorrimento che utilizza i componenti Swiper e SwiperSlide:

importare Reagire da'reagire';
importare {Swiper, SwiperSlide} da"scorri / reagisci";
importare'scorrimento/css';
funzioneApp() {
ritorno (




<divnome della classe='elemento'>Elemento 1div></SwiperSlide>
<divnome della classe='elemento'>Elemento 2div></SwiperSlide>
<divnome della classe='elemento'>Elemento 3div></SwiperSlide>
<divnome della classe='elemento'>Elemento 4div></SwiperSlide>
 </Swiper>
 </div>
 )
}
esportarepredefinito App

In aggiunta a Scorri E SwiperSlide componenti, questo blocco di codice importa il foglio di stile predefinito per Swiper utilizzando il file swiper/css modulo.

L'esempio esegue quindi il wrapping di un componente Swiper attorno a quattro componenti figlio SwiperSlide. Ogni SwiperSlide contiene un div elemento con il nome della classe attributo. Puoi usare className per dare uno stile agli elementi div:

.elemento {
dimensione in linea: 100px;
bordo-raggio: 12px;
imbottitura: 1rem;
colore: #333333;
colore di sfondo: #e2e2e2;
famiglia di font: corsivo;
}

Personalizzare la tua interfaccia a scorrimento

Dopo aver creato con successo un'interfaccia a scorrimento, puoi migliorarne l'aspetto e la funzionalità in base alle tue esigenze.

Con Swiper, puoi personalizzare il comportamento e l'aspetto dell'interfaccia utilizzando varie opzioni. Passi queste opzioni al file Scorri componente come oggetti di scena in React:

importare Reagire da'reagire';
importare {Swiper, SwiperSlide} da"scorri / reagisci";
importare'scorrimento/css';
funzioneApp() {
ritorno (



 spazioTra={30}
 slidesPerView={2}
 ciclo={ VERO }
 >
<divnome della classe='elemento'>Elemento 1div></SwiperSlide>
<divnome della classe='elemento'>Elemento 2div></SwiperSlide>
<divnome della classe='elemento'>Elemento 3div></SwiperSlide>
<divnome della classe='elemento'>Elemento 4div></SwiperSlide>
 </Swiper>
 </div>
 )
}
esportarepredefinito App

In questo esempio, il componente Swiper include tre oggetti di scena: spazioTra, slidesPerView, E ciclo continuo. IL spazioTra prop imposta lo spazio tra ogni diapositiva, in questo caso 30 pixel.

Usando il slidesPerView prop, puoi impostare il numero di diapositive visibili contemporaneamente. In questo caso, il slidesPerView prop è impostato su 2 causando il Scorri componente per visualizzare due diapositive contemporaneamente.

Infine il ciclo continuo prop specifica se le diapositive devono essere ripetute all'infinito o meno. In questo esempio, le diapositive si ripeteranno all'infinito perché il file ciclo continuo il valore dell'elica è VERO.

Configurazione delle interfacce a scorrimento con i moduli

Puoi configurare ulteriormente il comportamento della tua interfaccia a scorrimento con Moduli javascript fornito dalla libreria Swiper. Alcuni dei moduli che fornisce sono Navigazione, Riproduzione automatica, Impaginazione, E Barra di scorrimento.

Per utilizzare uno qualsiasi di questi moduli nella tua applicazione, devi importarli dalla libreria Swiper. Dovresti anche importare gli stili CSS corrispondenti per i moduli e passare i loro nomi al file Scorri componente utilizzando il moduli puntello.

Ad esempio, è così che puoi usare il file Navigazione modulo per configurare le tue interfacce a scorrimento:

importare Reagire da"reagire";
importare {Swiper, SwiperSlide} da"scorri / reagisci";
importare { Navigazione } da"spazzola";
importare"scorrimento/css";
importare"swiper/css/navigazione";
funzioneApp() {
ritorno (



 spazioTra={30}
 slidesPerView={2}
 moduli={[Navigazione]}
 ciclo={VERO}
 navigazione={VERO}
 >
<divnome della classe="elemento">Elemento 1div></SwiperSlide>
<divnome della classe="elemento">Elemento 2div></SwiperSlide>
<divnome della classe="elemento">Elemento 3div></SwiperSlide>
<divnome della classe="elemento">Elemento 4div></SwiperSlide>
 </Swiper>
 </div>
 );
}
esportarepredefinito Applicazione;

Questo blocco di codice importa il file Navigazione module e il suo stile CSS, quindi specifica il modulo nel file moduli puntello del Scorri componente. IL moduli prop abilita e configura i moduli forniti dalla libreria Swiper.

Il modulo Navigazione fornisce funzionalità di navigazione al componente Swiper. Aggiunge i pulsanti freccia precedente e successivo su cui è possibile fare clic o toccare per passare alla diapositiva precedente o successiva.

IL navigazione prop value è vero che farà visualizzare i pulsanti precedente e successivo sullo schermo.

Configurazione di interfacce a scorrimento con AutoPlay

IL Riproduzione automatica Il modulo consente al dispositivo di scorrimento di passare automaticamente da una diapositiva all'altra senza l'interazione dell'utente.

Ecco un esempio di come configurare l'interfaccia a scorrimento utilizzando il Riproduzione automatica modulo:

importare Reagire da"reagire";
importare {Swiper, SwiperSlide} da"scorri / reagisci";
importare { Riproduzione automatica } da"spazzola";
importare"scorrimento/css";
importare"scorrimento/css/riproduzione automatica";
funzioneApp() {
ritorno (



 spazioTra={30}
 slidesPerView={2}
 moduli={[Riproduzione automatica]}
 ciclo={VERO}
 riproduzione automatica={{ ritardo: 3000 }}
 >
<divnome della classe="elemento">Elemento 1div></SwiperSlide>
<divnome della classe="elemento">Elemento 2div></SwiperSlide>
<divnome della classe="elemento">Elemento 3div></SwiperSlide>
<divnome della classe="elemento">Elemento 4div></SwiperSlide>
 </Swiper>
 </div>
 );
}
esportarepredefinito Applicazione;

Usando il riproduzione automatica prop, puoi specificare il file ritardo; in questo caso, è impostato su 3000 millisecondi.

Configurazione di interfacce a scorrimento con impaginazione

Un altro importante modulo Swiper è Impaginazione. IL Impaginazione Il modulo consente di aggiungere punti elenco di impaginazione o indicatori della barra di avanzamento allo slider, offrendo agli utenti una rappresentazione visiva del numero di diapositive e della loro posizione corrente all'interno dello slider.

Per usare il Impaginazione modulo, è necessario importarlo e includerlo nel file moduli puntello del Scorri componente:

importare Reagire da"reagire";
importare {Swiper, SwiperSlide} da"scorri / reagisci";
importare { Impaginazione } da"spazzola";
importare"scorrimento/css";
importare"swiper/css/impaginazione";
funzioneApp() {
ritorno (



 spazioTra={30}
 slidesPerView={2}
 moduli={[Impaginazione]}
 ciclo={VERO}
 impaginazione={{ cliccabile: VERO }}
 >
<divnome della classe="elemento">Elemento 1div></SwiperSlide>
<divnome della classe="elemento">Elemento 2div></SwiperSlide>
<divnome della classe="elemento">Elemento 3div></SwiperSlide>
<divnome della classe="elemento">Elemento 4div></SwiperSlide>
 </Swiper>
 </div>
 );
}
esportarepredefinito Applicazione;

Questo blocco di codice fornisce la funzionalità di impaginazione con il Impaginazione modulo. Consente inoltre agli utenti di fare clic su impaginazione proiettili impostando il cliccabile proprietà del impaginazione prop al vero.

Oltre alla libreria Swiper impaginazione modulo, reagire-paginare è un'altra eccellente opzione per creare l'impaginazione nella tua applicazione React.

Creazione di applicazioni accessibili con React

Le interfacce a scorrimento migliorano l'esperienza utente della tua applicazione per gli utenti touchscreen. Swiper offre molta flessibilità e puoi facilmente personalizzarlo in base alle esigenze della tua app.

Varie librerie dell'interfaccia utente possono aiutarti a rendere le tue applicazioni React più accessibili. Queste librerie forniscono caratteristiche e funzionalità che migliorano l'esperienza utente della tua applicazione.