Comment créer des interfaces swipeables dans votre application React avec Swiper
À mesure que les appareils mobiles deviennent plus populaires, les interfaces swipeables sont devenues un moyen standard d’interagir avec les applications. Les interfaces swipeables sont essentielles pour fournir la meilleure expérience utilisateur aux utilisateurs mobiles.
Swiper est une bibliothèque polyvalente qui vous permet de créer des interfaces swipeables dans vos applications React. Découvrez comment vous pouvez créer des interfaces swipeables dans votre application React à l’aide de Swiper.
Installation de Swiper
Swiper est l’une des nombreuses bibliothèques que vous pouvez utiliser pour personnaliser votre application React. Pour commencer à utiliser 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 :
Une fois Swiper installé, vous pouvez l’utiliser dans votre application.
Création d’interfaces Swipeables
Après avoir installé Swiper dans votre application React, vous pouvez créer des interfaces swipeables. Commencez par importer le fichier Swiper et Glissière de l’essuie-glace de la bibliothèque Swiper.
Le composant Swiper est l’élément central de la bibliothèque Swiper. Il définit la structure, le comportement et les fonctionnalités des éléments à balayer. 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’une interface swipeable utilisant les composants Swiper et SwiperSlide :
En plus du composant Swiper et Glissière de l’essuie-glace ce bloc de code importe la feuille de style par défaut de Swiper à l’aide de l’élément swiper/css .
L’exemple présente ensuite un composant Swiper autour de quatre composants enfants SwiperSlide. Chaque SwiperSlide contient un module div avec l’élément nomdeclasse . Vous pouvez utiliser le nom de classe pour donner du style aux éléments div :
Personnalisation de l’interface Swipeable
Après avoir créé avec succès une interface mobile, vous pouvez améliorer son apparence et ses fonctionnalités pour répondre à vos besoins.
Avec Swiper, vous pouvez personnaliser le comportement et l’apparence de l’interface à l’aide de diverses options. Vous passez ces options à la fonction Swiper en tant que props dans React :
Dans cet exemple, le composant Swiper prend en charge trois props : spaceBetween, slidesPerView et loop. La boucle espace entre prop définit l’espace entre chaque diapositive, dans ce cas 30 pixels.
L’utilisation de la fonction slidesPerView vous pouvez définir le nombre de diapositives visibles simultanément. Dans ce cas, la propriété slidesPerView est fixée à 2, ce qui fait que la propriété Swiper d’afficher deux diapositives simultanément.
Enfin, le composant boucle indique si les diapositives doivent tourner en boucle à l’infini ou non. Dans cet exemple, les diapositives seront bouclées à l’infini parce que la propriété boucle est vrai.
Configuration des interfaces Swipeable à l’aide de modules
Vous pouvez configurer davantage le comportement de votre interface swipeable à l’aide de modules JavaScript fournis par la bibliothèque Swiper. Voici quelques-uns de ces modules Navigation, Autoplay, Pagination et Barre de défilement.
Pour utiliser l’un de ces modules dans votre application, vous devez l’importer à partir de la bibliothèque Swiper. Vous devez également importer les styles CSS correspondants pour les modules et transmettre leurs noms à la fonction Swiper à l’aide de l’élément modules prop.
Par exemple, voici comment vous pouvez utiliser le module Navigation pour configurer vos interfaces de type « swipeable » :
Ce bloc de code importe le module Navigation et son style CSS, puis spécifie le module dans l’élément modules prop de la Swiper . Le composant modules permet d’activer et de configurer les modules fournis par la bibliothèque Swiper.
Le module Navigation fournit une fonctionnalité 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 module navigation est vrai, ce qui entraîne l’affichage des boutons précédent et suivant à l’écran.
Configuration des interfaces à balayage avec AutoPlay
Les Autoplay permet au curseur de passer automatiquement d’une diapositive à l’autre sans intervention de l’utilisateur.
Voici un exemple de configuration de l’interface mobile à l’aide du module Autoplay pour le module Autoplay :
En utilisant le module autoplay vous pouvez spécifier l’option retard; dans ce cas, il est fixé à 3000 millisecondes.
Configuration d’interfaces à balayage avec pagination
Un autre module important de Swiper est Pagination. Le module Pagination 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 module Pagination vous devez l’importer et l’inclure dans le fichier modules de l’élément Swiper composant :
Ce bloc de code fournit la fonctionnalité de pagination avec le composant Pagination . Il permet également aux utilisateurs de cliquer sur le bouton Il permet également aux utilisateurs de cliquer sur le module pagination en définissant l’attribut cliquable de la propriété pagination à true.
En plus de la bibliothèque Swiper pagination de la bibliothèque Swiper, react-paginate est une autre excellente option pour créer une pagination dans votre application React.
Construire des applications accessibles avec React
Les interfaces swipeables améliorent l’expérience utilisateur de votre application pour les utilisateurs d’écrans tactiles. Swiper offre beaucoup de flexibilité et vous pouvez facilement le personnaliser en fonction des besoins de votre application.
Diverses bibliothèques d’interface utilisateur peuvent contribuer à rendre vos applications React plus accessibles. Ces bibliothèques fournissent des caractéristiques et des fonctionnalités qui améliorent l’expérience utilisateur de votre application.
