Comment utiliser le carrousel Bootstrap dans React


introduction

Dans cet article, je vais vous expliquer comment créer un carrousel Bootstrap dans React.js. Un carrousel est un diaporama permettant de parcourir une série d’images ou de vidéos. Un carrousel fait pivoter les images horizontalement ou verticalement avec un certain effet.

Conditions préalables

  • Connaissance de base de React.js.
  • Code Visual Studio.
  • Nœud et NPM installés.
  • Amorcer.

Créer un projet ReactJS

Créons d’abord une application React à l’aide de la commande suivante.

Ouvrez le projet nouvellement créé dans Visual Studio Code et installez Bootstrap dans ce projet à l’aide de la commande suivante.

Maintenant, ouvrez le index.js fichier et importez Bootstrap.

Maintenant, faites un clic droit sur le dossier public. Ajoutez un nouveau dossier, les atouts, et en dessous, ajoutez un nouveau dossier et renommez-le en img. Ensuite, ajoutez des images de démonstration à ce dossier

Système de fichiers

Système de fichiers

Maintenant, allez au src dossier et créer un nouveau composant, BootstrapCarousel.js et ajoutez la référence suivante dans ce composant:

Ajoutez le code suivant dans ce composant:

Ouvert app.js fichier et ajoutez le code suivant:

Exécutez maintenant le projet en utilisant npm start et vérifiez le résultat.

Nous pouvons également suspendre le curseur au survol de la souris et définir des intervalles de temps. Créons un composant BootstrapCarouselDemo.js et ajoutez la référence suivante dans ce composant.

Maintenant, ouvrez le app.js fichier et ajoutez le code suivant:

Maintenant, exécutez le projet en utilisant ‘npm start’ et vérifiez vos résultats.

Résumé

Dans cet article, nous avons appris à implémenter le carrousel d’amorçage dans une application React.js.

Close Menu