Volkeno Awesome Carousel est un composant puissant, léger et entièrement personnalisable pour des applications ReactJS. Comme son nom l’indique, c’est un carrousel, un diaporama permettant de parcourir une série de contenus, construit avec des transformations CSS 3D et un peu de JavaScript. Il fonctionne avec une série d’images , de textes ou de balisages personnalisés.

Il inclut également la prise en charge des commandes et des indicateurs précédents/suivants. C’est un composant très utile et facile à utiliser, car il est personnalisable grâce aux paramètres que l’on va lui passer.

En tant que développeuse web, Volkeno Awesome Carousel m’aide à gagner du temps parce que c’est un composant prêt à l’emploi.

CAS PRATIQUE

On va utiliser le composant pour représenter les témoignages des partenaires de notre site.

Prise en main du module

D’abord on va créer un nouveau projet React avec Typescript afin de tester notre module.

TypeScript est un sur-ensemble typé de JavaScript qui se compile en JavaScript brut.

Création d’un projet React 

Pour démarrer un nouveau projet Create React App avec TypeScript , vous pouvez exécuter :

npx create-react-app tuto-carousel –template typescript

Après installation, on se positionne sur le répertoire du projet et on l’ouvre avec un éditeur de texte de notre choix. Dans ce tutoriel, nous allons utiliser VSCode comme éditeur. Une fois que le serveur est démarré avec cette commande :

npm start

Ainsi, vous tomberez sur la page starter d’un projet React :

Bravo !!! Nous venons de créer notre projet React avec TypeScript, ce qui veut dire, nous avons fait la première partie de ce tutoriel.

Installation du module

Maintenant on va installer le module Volkeno Carousel dans le projet. 

Pour ce faire, on va l’installer comme dépendance en utilisant cette commande :

npm install –save volkeno-awesome-carousel

Après avoir installé le module, on l’utilise en oubliant pas de l’importer et d’importer le style aussi comme ceci.

Ici, on a passé les éléments en props. 

Les props sont utilisés dans React pour transmettre des données d’un composant à un autre (d’un composant parent à un ou plusieurs composants enfants). 

Ils sont utiles lorsque vous souhaitez que le flux de données dans votre application soit dynamique.

Voici comment importer le module et son style :

On déclare un tableau de données pour les éléments de notre carousel. Qui va ressembler comme suit : on aura à l’intérieur l’image , le texte qu’on veut mettre , l’auteur du texte et enfin le poste qu’occupe l’auteur du texte.

Vous disposez aussi d’une fonction qui permet de récupérer l’index courant de l’item actif, dans le cas où vous souhaiterez effectuer des opérations supplémentaires.

Enfin, vous pouvez maintenant visualiser votre carrousel comme sur l’image ci-dessus :

Customisation du module

Vous avez la possibilité de customiser le module à votre guise avec les propriétés suivantes :

Là on passe autoplay à true pour permettre au carrousel de slider sans qu’on appuie sur les boutons de controls.

On a aussi défini interval à 3000 pour le temps de latence entre les slides. Aussi, on a défini arrows à false ainsi que arrowsBorders à false pour enlever les boutons de controls. Donc voici le résultat final après toutes ces modifications.

Cliquez ici pour voir le live démo sur Codesandbox