Comment créer un carrousel interactif dans React.js

React.js est une bibliothèque JavaScript populaire et puissante pour créer des interfaces utilisateur. Vous pouvez l'utiliser pour créer des applications Web dynamiques, interactives et réactives.

L'un des composants communs que vous pouvez utiliser avec React.js est le carrousel. C'est facile à faire, soit avec les fonctionnalités React intégrées, soit en utilisant une bibliothèque tierce.

Qu'est-ce qu'un carrousel et à quoi sert-il ?

Un carrousel est un composant de diaporama qui vous permet de parcourir des images ou des vidéos. Il est le plus souvent utilisé sur les sites Web pour présenter des produits ou des services ou pour montrer le contenu présenté. L'utilisation d'un carrousel présente de nombreux avantages, tels que :

• C'est un moyen efficace d'attirer l'attention sur un contenu important.
• C'est un excellent moyen de présenter plusieurs images et vidéos.
instagram viewer
• Cela aide à garder la page organisée et visuellement attrayante.
• Vous pouvez l'utiliser pour créer une expérience utilisateur interactive.

Comment créer un carrousel dans React.js

La création d'un carrousel dans React.js est relativement simple et vous pouvez utiliser deux bibliothèques populaires. Vous pouvez également utiliser les fonctionnalités React intégrées pour ajouter un carrousel.

Utilisation des fonctionnalités intégrées

La première méthode de création d'un carrousel dans React.js consiste à utiliser des fonctionnalités intégrées. React fournit un moyen puissant de créer un carrousel en utilisant des composants. Tu peux utiliser les crochets React pour ajouter et contrôler un carrousel.

importer Réagissez, { useState } depuis 'réagir';

constante Carrousel = () => {
constante [index, setIndex] = useState(0);
constante longueur = 3;

constante poignéePrécédent = () => {
constante nouvelIndex = index - 1;
setIndex (nouvelIndex < 0? longueur - 1: nouvelIndex );
};

constante handleNext = () => {
constante nouvelIndex = index + 1;
setIndex (nouvelIndex >= longueur? 0: nouvelIndex );
};

retour (
<div nom_classe="carrousel">
<bouton onClick={handlePrevious}>Précédent</button>
<bouton onClick={handleNext}>Suivant</button>
<p>{indice}</p>
</div>
);
};

exporterdéfaut Carrousel;

Ce code utilise le crochet useState pour créer une variable d'état appelée index. Cela gardera une trace de la position actuelle dans le carrousel.

Les fonctions handlePrevious et handleNext s'occupent des mises à jour de la valeur d'index lorsque l'utilisateur clique sur le Précédent et Suivant boutons.

Enfin, le balisage affiche la valeur d'index dans une balise de paragraphe. Vous pouvez afficher des images ou des vidéos au lieu de texte si vous le souhaitez. Vous pouvez également styliser le carrousel en utilisant le CSS normal ou en utilisant un framework CSS comme Tailwind CSS.

Sans style fantaisiste, vous devriez voir une paire de boutons de base et un nombre représentant l'index actuel :

Utilisation de la bibliothèque pure-react-carousel

La deuxième méthode de création d'un carrousel dans React.js est la bibliothèque pure-react-carousel. Cette bibliothèque fournit un moyen puissant de créer un carrousel à l'aide de composants. Pour utiliser la bibliothèque, vous devez d'abord l'installer à l'aide de la commande :

npm installer pure-react-carrousel

Une fois que vous avez installé la bibliothèque, vous pouvez utiliser le composant pour créer un carrousel. Voici un exemple d'utilisation du composant Carousel :

importer Réagir depuis 'réagir';
importer { CarouselProvider, Slider, Slide, ButtonBack, ButtonNext } depuis 'pur-réagir-carrousel' ;
importer 'pure-react-carousel/dist/react-carousel.es.css';

constante Carrousel = () => {
retour (
<Fournisseur de carrousel
naturalSlideWidth={100}
naturalSlideHeight={120}
totalDiapositives={3}
>
<Glissière>
<Indice de diapositive={0}>Diapositive 1</Slide>
<Indice de diapositive={1}>Diapositive 2</Slide>
<Indice de diapositive={2}>Diapositive 3</Slide>
</Slider>
<BoutonRetour>Dos</ButtonBack>
<BoutonSuivant>Suivant</ButtonNext>
</CarouselProvider>
);
};

exporterdéfaut Carrousel;

Dans ce code, vous pouvez voir que le composant CarouselProvider définit les paramètres généraux du carrousel, tels que naturalSlideWidth, naturalSlideHeight et totalSlides.

Le composant Slider contient plusieurs instances Slide. Le composant Diapositive définit chaque diapositive individuelle.

Enfin, les composants ButtonBack et ButtonNext gèrent la navigation en carrousel.

L'utilisation de la bibliothèque pure-react-carousel présente de nombreux avantages, tels que :

• Facile à utiliser: Alors que la méthode intégrée nécessite plus de code pour créer un carrousel, la bibliothèque offre un moyen plus simple de créer un carrousel dans React.js.
• Sensible: La bibliothèque offre la possibilité de créer des carrousels réactifs. Avec la méthode intégrée, vous devrez créer un carrousel séparé pour différentes tailles d'écran.
• Personnalisation : La bibliothèque fournit de nombreuses fonctionnalités que vous pouvez utiliser pour personnaliser le carrousel, telles que la lecture automatique, les flèches de navigation, la pagination, etc.

Utilisation de la bibliothèque react-responsive-carousel

La dernière méthode de création d'un carrousel dans React.js est la bibliothèque react-responsive-carousel. Avec cette bibliothèque, vous pouvez créer un carrousel à l'aide de composants. Pour utiliser la bibliothèque, vous devez d'abord l'installer à l'aide de la commande :

npm installer réagir-réactif-carrousel

Une fois que vous avez installé la bibliothèque, vous pouvez utiliser le composant pour créer un carrousel. Voici un exemple d'utilisation du composant Carrousel :

importer Réagir depuis 'réagir';
importer { Carrousel } depuis 'réagir-réactif-carrousel';
importer 'réagir-réactif-carrousel/lib/styles/carousel.min.css';

constante PageCarrousel = () => {
retour (
<Carrousel>
<div>
<img source="https://placehold.co/100x100" />
<p NomClasse="légende">Légende 1</p>
</div>
<div>
<img source="https://placehold.co/200x200" />
<p NomClasse="légende">Légende 2</p>
</div>
<div>
<img source="https://placehold.co/300x300" />
<p NomClasse="légende">Légende 3</p>
</div>
</Carousel>
);
};

exporterdéfaut CarrouselPage ;

Dans ce code, vous pouvez voir que le composant Carousel définit le carrousel. À l'intérieur du composant Carousel, un div contient chaque diapositive individuelle. Chaque diapositive peut contenir une image ainsi qu'une légende pour cette image. La bibliothèque fournit également une gamme d'options et de paramètres que vous pouvez utiliser pour personnaliser le carrousel.

L'utilisation de la bibliothèque react-responsive-carousel présente de nombreux avantages, tels que :

• Une des bibliothèques les plus populaires : La bibliothèque est l'une des bibliothèques les plus populaires pour créer des carrousels dans React.js. Ainsi, si vous êtes bloqué, vous pouvez facilement trouver de l'aide auprès de la communauté.
• Facile à utiliser: Avec seulement quelques lignes de code, vous pouvez facilement créer un carrousel.
• Sensible: La bibliothèque offre la possibilité de créer des carrousels réactifs.
• Personnalisation : La bibliothèque fournit également de nombreuses fonctionnalités que vous pouvez utiliser pour personnaliser et styliser les carrousels.

Améliorez l'expérience utilisateur avec un carrousel

Avec un carrousel, vous pouvez fournir plus d'informations aux utilisateurs et les aider à interagir plus facilement avec votre site Web. Les carrousels aident également à garder la page organisée et visuellement attrayante. En conséquence, c'est un excellent moyen d'améliorer l'expérience utilisateur.

Vous pouvez également suivre l'interaction des utilisateurs avec vos carrousels et utiliser les données pour optimiser l'expérience utilisateur. Cela vous aidera à créer une meilleure expérience utilisateur sur votre site Web. Après cela, vous pouvez déployer votre application React gratuitement sur des plateformes telles que les pages Github, ce qui est simple et économique.