Composant de carrousel ReactJS UI Ant Design

Afficher la discussion

Améliorer l’article

Enregistrer l’article

J’aime l’article

Afficher la discussion

Améliorer l’article

Enregistrer l’article

J’aime l’article

Ant Design Library a ce composant pré-construit, et il est également très facile à intégrer. Le composant Carrousel est utilisé pour afficher l’élément coulissant, et il est utilisé lorsqu’il existe un groupe de contenu au même niveau. Nous pouvons utiliser l’approche suivante dans ReactJS pour utiliser le composant Ant Design Carousel.

Accessoires de carrousel :

  • lecture automatique: Il est utilisé pour indiquer s’il faut défiler automatiquement ou non.
  • pointPosition : Il est utilisé pour positionner les points.
  • points : Il est utilisé pour indiquer s’il faut afficher les points au bas de la galerie, objet pour dotsClass, et tous les autres ou non.
  • assouplissement : C’est le nom de la fonction d’interpolation de transition.
  • effet: Il est utilisé pour l’effet de transition.
  • afterChange : Il s’agit d’une fonction de rappel qui est déclenchée après le changement d’index actuel.
  • avantModifier : Il s’agit d’une fonction de rappel qui est déclenchée avant que l’index actuel ne change.

Méthodes :

  • goTo(slideNumber, dontAnimate): Cette fonction est utilisée pour aller à l’index des diapositives, et si dontAnimate=true ça se passe sans animation.
  • Suivant(): Cette fonction est utilisée pour passer de la diapositive actuelle à la diapositive suivante.
  • prev() : Cette fonction est utilisée pour changer la diapositive actuelle à la diapositive précédente.

Création de l’application React et installation du module :

  • Étape 1: Créez une application React à l’aide de la commande suivante :

    npx create-react-app foldername
  • Étape 2: Après avoir créé votre dossier de projet, c’est-à-dire le nom du dossier, déplacez-vous dessus à l’aide de la commande suivante :

    cd foldername
  • Étape 3: Après avoir créé l’application ReactJS, installez le obligatoire module à l’aide de la commande suivante :

    npm install antd

Structure du projet : Cela ressemblera à ce qui suit.

ProjectStructure

Structure du projet

Exemple: Maintenant, écrivez le code suivant dans le App.js dossier. Ici, App est notre composant par défaut où nous avons écrit notre code.

App.js

import React from 'react'

import "antd/dist/antd.css";

import { Carousel } from 'antd';

 

export default function App() {

 

  return (

    <div style={{

      display: 'block', width: 700, padding: 30

    }}>

      <h4>ReactJS Ant-Design Carousel Component</h4>

      <>

        <Carousel>

          <div>

            <h3 style={{ backgroundColor: 'red'

                         height: 100 }}>Item 1</h3>

          </div>

          <div>

            <h3 style={{ backgroundColor: 'blue',

                         height: 100 }}>Item 2</h3>

          </div>

          <div>

            <h3 style={{ backgroundColor: 'yellow'

                         height: 100 }}>Item 3</h3>

          </div>

        </Carousel>

      </>

    </div>

  );

}

Étape pour exécuter l’application : Exécutez l’application à l’aide de la commande suivante à partir du répertoire racine du projet :

npm start

Production: Ouvrez maintenant votre navigateur et accédez à http://localhost:3000/vous verrez la sortie suivante :

ReactApp2

Référence: https://ant.design/components/carousel/

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *