Comment créer un carrousel interactif dans React.js

Comment créer un carrousel interactif dans React.js
Des lecteurs comme vous aident à soutenir MUO. Lorsque vous effectuez un achat en utilisant des liens sur notre site, nous pouvons gagner une commission d'affiliation. Lire la suite.

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.



UTILISEZ LA VIDÉO DU JOUR

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.
  • Cela aide à garder la page organisée et visuellement attrayante.
  • Vous pouvez l'utiliser pour créer une expérience utilisateur interactive.

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.

comment vérifier le mot de passe wifi sur android

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.



import React, { useState } from 'react';

const Carousel = () => {
const [index, setIndex] = useState(0);
const length = 3;

const handlePrevious = () => {
const newIndex = index - 1;
setIndex(newIndex < 0 ? length - 1 : newIndex);
};

const handleNext = () => {
const newIndex = index + 1;
setIndex(newIndex >= length ? 0 : newIndex);
};

return (
<div className="carousel">
<button onClick={handlePrevious}>Previous</button>
<button onClick={handleNext}>Next</button>
<p>{index}</p>
</div>
);
};

export default Carousel;

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 Prochain 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 :



application de réaction avec des carrousels utilisant des fonctionnalités intégrées

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 install pure-react-carousel

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 :

import React from 'react';
import { CarouselProvider, Slider, Slide, ButtonBack, ButtonNext } from 'pure-react-carousel';
import 'pure-react-carousel/dist/react-carousel.es.css';

const Carousel = () => {
return (
<CarouselProvider
naturalSlideWidth={100}
naturalSlideHeight={120}
totalSlides={3}
>
<Slider>
<Slide index={0}>Slide 1</Slide>
<Slide index={1}>Slide 2</Slide>
<Slide index={2}>Slide 3</Slide>
</Slider>
<ButtonBack>Back</ButtonBack>
<ButtonNext>Next</ButtonNext>
</CarouselProvider>
);
};

export default Carousel;

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.

application de réaction avec des carrousels à l'aide d'un package

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.

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 install react-responsive-carousel

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 :

import React from 'react';
import { Carousel } from 'react-responsive-carousel';
import 'react-responsive-carousel/lib/styles/carousel.min.css';

const CarouselPage = () => {
return (
<Carousel>
<div>
<img src="https://placehold.co/100x100" />
<p className="legend">Legend 1</p>
</div>
<div>
<img src="https://placehold.co/200x200" />
<p className="legend">Legend 2</p>
</div>
<div>
<img src="https://placehold.co/300x300" />
<p className="legend">Legend 3</p>
</div>
</Carousel>
);
};

export default CarouselPage;

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.

application de réaction avec des carrousels à l'aide d'un package

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.

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.