Comment créer des interfaces balayables dans votre application React avec Swiper

À mesure que les appareils mobiles deviennent de plus en plus populaires, les interfaces glissables sont devenues un moyen standard d'interagir avec les applications. Les interfaces glissables sont essentielles pour offrir la meilleure expérience utilisateur aux utilisateurs mobiles.

Swiper est une bibliothèque polyvalente qui vous permet de créer des interfaces glissables dans vos applications React. Découvrez comment vous pouvez créer des interfaces glissables dans votre application React à l'aide de Swiper.

Installation du swiper

Swiper est l'une des nombreuses bibliothèques que vous pouvez utiliser pour personnaliser votre application React. Pour démarrer avec Swiper, vous devez l'installer dans votre application React. Vous pouvez le faire avec la commande de terminal suivante que vous devez exécuter dans le répertoire racine de votre projet :

npm installer le swiper

Une fois que vous avez installé Swiper, vous pouvez l'utiliser dans votre application.

Création d'interfaces balayables

Après avoir installé Swiper dans votre application React, vous pouvez créer des interfaces glissables. Commencez par importer le Balayeur et Glissière composants de la bibliothèque Swiper.

Le composant Swiper est le composant principal de la bibliothèque Swiper. Il définit la structure, le comportement et la fonctionnalité des éléments balayables. Le composant SwiperSlide est un composant enfant du composant Swiper. Il définit les diapositives individuelles qui se trouvent dans le composant Swiper.

Voici un exemple d'interface glissable utilisant les composants Swiper et SwiperSlide :

importer Réagir depuis'réagir';
importer {Swiper, SwiperSlide} depuis"swiper/réagir";
importer'swiper/css';
fonctionApplication() {
retour (




<divnom du cours='élément'>Élément 1div></SwiperSlide>
<divnom du cours='élément'>Élément 2div></SwiperSlide>
<divnom du cours='élément'>Élément 3div></SwiperSlide>
<divnom du cours='élément'>Élément 4div></SwiperSlide>
 </Swiper>
 </div>
 )
}
exporterdéfaut Application

En plus de Balayeur et Glissière composants, ce bloc de code importe la feuille de style par défaut pour Swiper à l'aide de la swipe/css module.

L'exemple encapsule ensuite un composant Swiper autour de quatre composants enfants SwiperSlide. Chaque SwiperSlide contient un div élément avec le nom du cours attribut. Vous pouvez utiliser le className pour styliser les éléments div :

.élément {
taille en ligne: 100pixels;
rayon de bordure: 12pixels;
rembourrage: 1Rem;
couleur: #333333;
Couleur de l'arrière plan: #e2e2e2;
famille de polices: cursive;
}

Personnalisation de votre interface balayable

Après avoir réussi à créer une interface à glisser, vous pouvez améliorer son apparence et ses fonctionnalités en fonction de vos besoins.

Avec Swiper, vous pouvez personnaliser le comportement et l'apparence de l'interface à l'aide de diverses options. Vous transmettez ces options au Balayeur composant comme accessoires dans React:

importer Réagir depuis'réagir';
importer {Swiper, SwiperSlide} depuis"swiper/réagir";
importer'swiper/css';
fonctionApplication() {
retour (



 espaceEntre={30}
 slidesPerView={2}
 boucle={ vrai }
 >
<divnom du cours='élément'>Élément 1div></SwiperSlide>
<divnom du cours='élément'>Élément 2div></SwiperSlide>
<divnom du cours='élément'>Élément 3div></SwiperSlide>
<divnom du cours='élément'>Élément 4div></SwiperSlide>
 </Swiper>
 </div>
 )
}
exporterdéfaut Application

Dans cet exemple, le composant Swiper prend trois props: l'espace entre, slidesPerView, et boucle. Le l'espace entre prop définit l'espace entre chaque diapositive, dans ce cas 30 pixels.

En utilisant le slidesPerView prop, vous pouvez définir le nombre de diapositives visibles à la fois. Dans ce cas, le slidesPerView prop est réglé sur 2 provoquant le Balayeur composant pour afficher deux diapositives simultanément.

Enfin, le boucle prop spécifie si les diapositives doivent boucler à l'infini ou non. Dans cet exemple, les diapositives tourneront en boucle à l'infini car le boucle la valeur de prop est vrai.

Configuration de vos interfaces balayables avec des modules

Vous pouvez configurer davantage le comportement de votre interface glissable avec Modules Javascript fourni par la bibliothèque Swiper. Certains des modules qu'il propose sont La navigation, Lecture automatique, Pagination, et Barre de défilement.

Pour utiliser l'un de ces modules dans votre application, vous devez les importer depuis la bibliothèque Swiper. Vous devez également importer les styles CSS correspondants pour les modules et transmettre leurs noms au Balayeur composant utilisant le modules soutenir.

Par exemple, voici comment vous pouvez utiliser le La navigation module pour configurer vos interfaces swipeable :

importer Réagir depuis"réagir";
importer {Swiper, SwiperSlide} depuis"swiper/réagir";
importer { La navigation } depuis"swiper";
importer"swiper/css";
importer"swiper/css/navigation";
fonctionApplication() {
retour (



 espaceEntre={30}
 slidesPerView={2}
 module={[Navigation]}
 boucle={vrai}
 navigation={vrai}
 >
<divnom du cours="élément">Élément 1div></SwiperSlide>
<divnom du cours="élément">Élément 2div></SwiperSlide>
<divnom du cours="élément">Élément 3div></SwiperSlide>
<divnom du cours="élément">Élément 4div></SwiperSlide>
 </Swiper>
 </div>
 );
}
exporterdéfaut application ;

Ce bloc de code importe le La navigation module et son style CSS, puis spécifie le module dans le modules accessoire de la Balayeur composant. Le modules prop active et configure les modules fournis par la bibliothèque Swiper.

Le module de navigation fournit des fonctionnalités de navigation au composant Swiper. Il ajoute des boutons fléchés précédent et suivant sur lesquels vous pouvez cliquer ou appuyer pour passer à la diapositive précédente ou suivante.

Le la navigation la valeur prop est true, ce qui entraînera l'affichage des boutons précédent et suivant à l'écran.

Configuration des interfaces balayables avec AutoPlay

Le Lecture automatique Le module permet au curseur de passer automatiquement d'une diapositive à l'autre sans interaction de l'utilisateur.

Voici un exemple de configuration de votre interface glissable à l'aide de Lecture automatique module:

importer Réagir depuis"réagir";
importer {Swiper, SwiperSlide} depuis"swiper/réagir";
importer { Lecture automatique } depuis"swiper";
importer"swiper/css";
importer"swiper/css/lecture automatique";
fonctionApplication() {
retour (



 espaceEntre={30}
 slidesPerView={2}
 modules={[Lecture automatique]}
 boucle={vrai}
 lecture automatique={{ retard: 3000 }}
 >
<divnom du cours="élément">Élément 1div></SwiperSlide>
<divnom du cours="élément">Élément 2div></SwiperSlide>
<divnom du cours="élément">Élément 3div></SwiperSlide>
<divnom du cours="élément">Élément 4div></SwiperSlide>
 </Swiper>
 </div>
 );
}
exporterdéfaut application ;

En utilisant le lecture automatique prop, vous pouvez spécifier le retard; dans ce cas, il est réglé sur 3000 millisecondes.

Configuration des interfaces balayables avec la pagination

Un autre module important de Swiper est Pagination. Le Pagination Le module vous permet d'ajouter des puces de pagination ou des indicateurs de barre de progression au curseur, donnant aux utilisateurs une représentation visuelle du nombre de diapositives et de leur position actuelle dans le curseur.

Pour utiliser le Pagination module, vous devez l'importer et l'inclure dans le modules accessoire de la Balayeur composant:

importer Réagir depuis"réagir";
importer {Swiper, SwiperSlide} depuis"swiper/réagir";
importer { Mise en page } depuis"swiper";
importer"swiper/css";
importer"swiper/css/pagination";
fonctionApplication() {
retour (



 espaceEntre={30}
 slidesPerView={2}
 modules={[Pagination]}
 boucle={vrai}
 pagination={{ cliquable: vrai }}
 >
<divnom du cours="élément">Élément 1div></SwiperSlide>
<divnom du cours="élément">Élément 2div></SwiperSlide>
<divnom du cours="élément">Élément 3div></SwiperSlide>
<divnom du cours="élément">Élément 4div></SwiperSlide>
 </Swiper>
 </div>
 );
}
exporterdéfaut application ;

Ce bloc de code fournit la fonctionnalité de pagination avec le Pagination module. Il permet également aux utilisateurs de cliquer sur le pagination balles en définissant le cliquable propriété de la pagination prop à vrai.

En plus de la bibliothèque Swiper pagination module, réagir-paginer est une autre excellente option pour créer une pagination dans votre application React.

Créer des applications accessibles avec React

Les interfaces balayables améliorent l'expérience utilisateur de votre application pour les utilisateurs d'écrans tactiles. Swiper offre une grande flexibilité et vous pouvez facilement le personnaliser en fonction des besoins de votre application.

Diverses bibliothèques d'interface utilisateur peuvent aider à rendre vos applications React plus accessibles. Ces bibliothèques fournissent des fonctions et des fonctionnalités qui améliorent l'expérience utilisateur de votre application.