Nous venons d'apprendre sur le composant carrousel lors de la conférence précédente.
Dans cet exercice, nous allons ajouter un carrousel à notre
page index.html et, dans le processus, apprendre comment fonctionne le composant carrousel.
Aller à la page index.html,
nous allons ajouter une nouvelle ligne dans la div de contenu,
comme la première ligne dans la div.
Donc, je vais entrer et dire,
donner le contenu de ligne de classe div et à l'intérieur de cette div,
nous allons créer le composant carrousel.
Et dans ce qui est div, j'ajouterai dans la colonne intérieure div,
qui contiendra le composant carrousel ici.
Pour ajouter le carrousel,
ici, je vais ajouter dans le div avec l'ID mon carrousel et un carrousel de
classe et une
diapositive et la classe de ride de données.
Donc, vous pouvez voir le composant JavaScript entrer en action ici,
puis fermer la div et commencer à construire le carrousel à l'intérieur de cette div ici.
Dans ce carrousel,
nous ajouterons ensuite le contenu du carrousel.
Donc, je vais entrer et puis ajouter un autre div avec le
carousel-inner de classe et le rôle comme zone de liste.
C' est la façon dont nous construisons le carrousel et puis fermons cette div là.
Et à l'intérieur de cette div encore une fois, nous allons introduire des divs qui hébergeront
les éléments du carrousel en appliquant la classe d'élément de carrousel.
Et le premier dans le carrousel...
Le premier de la classe carrousel,
je vais appliquer la classe active.
Donc, c'est la première div qui commence à contenir
la diapositive de départ là-bas et les autres, je vais ajouter.
Permettez-moi d'ajouter deux autres divs carousel-item
ici et d'appliquer seulement le premier avec la classe active.
Maintenant, je vais introduire dans le contenu de ce carrousel articles.
Donc, pour construire un élément de carrousel,
je vais y aller et ensuite inclure une image avec le bloc d de classe.
Donc, ceci est utilisé pour,
c'est une classe flex qui permet à notre image d'être correctement positionnée, puis ajouter dans
la classe de fluide d'image, puis la source comme img.
Donc, ce que je vais faire est de déplacer ce contenu à partir
des trois lignes de contenu ci-dessous, puis l'ajouter dans le carrousel ici.
Donc, j'ajoute une image ici et ensuite au carrousel,
je peux également ajouter dans
un div avec
la légende du carrousel de classe.
Ici, nous pouvons inclure du texte qui sera plus relayé comme une légende sur l'image.
Donc je dirai la légende du carrousel d-none, d-md-block.
Et puis à l'intérieur ici,
j'inclurai le contenu des lignes de contenu ici.
Donc, je vais entrer et copier le contenu des lignes de contenu
ici, puis le coller dans le bloc de légende du carrousel ici.
Et je vais supprimer la classe que nous avons appliquée au H2 de ce contenu.
Maintenant, nous allons répéter la même chose pour les deux autres en copiant
le contenu à partir des lignes de contenu ci-dessous ici.
Laisse-moi terminer ça et nous reviendrons
voir à quoi ressemble le carrousel.
Ici, vous pouvez voir que j'ai terminé
les éléments de carrousel restants ici en copiant le contenu à partir des lignes de contenu ci-dessous.
Ajoutons quelques classes CSS pour que le carrousel soit bien structuré.
Donc, en allant au fichier styles.css en bas ici,
je vais ajouter quelques classes supplémentaires ici.
Pour la classe carrousel,
j'ajouterais l'arrière-plan en tant que 512DA8,
que nous avons utilisé avant la classe de couleur foncée.
Et puis pour la classe carousel-item,
je vais ajouter une hauteur de 300 pixels.
Et pour l'image qui est incluse à l'intérieur de l'élément carrousel,
je vais appliquer quelques transformations ici.
Je dirais, position absolue.
Je veux le positionner à gauche.
Donc, ce zéro haut et gauche positionnera cette image sur le bord supérieur gauche de
la boîte de carrousel là et avec
une hauteur minimale définie à 300 pixels pour correspondre à la hauteur des articles de carrousel.
Donc, cette image va essentiellement étirer toute la hauteur
du carrousel mais sera positionnée sur le bord gauche de la boîte de carrousel ici.
Laissez-moi enregistrer les changements.
Nous allons juste aller voir à quoi ressemble ce carrousel sur notre page web.
En allant sur la page Web,
vous pouvez maintenant voir ce carrousel en action sur notre page de table d'étude d'index.
Donc, vous pouvez voir que le carrousel est
positionné en haut ici et ensuite nous continuerons à défiler à intervalles réguliers.
Notez comment en utilisant les classes CSS,
j'ai stylé l'arrière-plan du carrousel de sorte que les légendes soient
clairement visibles dans le carrousel
et aussi comment l'image a été positionnée sur le carrousel.
La hauteur de cette diapositive de carrousel est fixée à 300 pixels.
Donc, cela donne une belle disposition propre pour ce carrousel.
Maintenant, ajoutons quelques contrôles pour ce carrousel.
Revenir à index.html.
Juste après le carrousel dans notre boîte, mais toujours à l'intérieur du carrousel,
je vais ajouter un OL pour introduire quelques commandes manuelles pour le carrousel.
Et avec les indicateurs de carrousel de classe.
Ces indicateurs seront placés sur
les diapositives du carrousel pour indiquer quelle diapositive particulière est actuellement affichée.
Alors laissez-moi vous présenter dans le contenu ici donc je dis OL,
j'utilise l'OL pour cela.
Et puis, à l'intérieur, j'utilise la liste avec
la cible de données définie sur mon carrousel.
C' est donc l'ID du carrousel et des données slide-to.
Et les premiers indicateurs glisseront à la diapositive numéro zéro.
Avec cette classe comme active pour le premier élément de cette liste,
alors les deux éléments restants que je vais simplement utiliser la liste avec la cible de données
définie égale à mon carrousel
et le data-slide-to est défini sur un.
Donc, c'est pour la deuxième diapositive là-bas.
Je vais juste copier celui-ci, puis créer le troisième indicateur ici.
Donc, nous allons entrer et copier ceci, puis changer ceci en diapositive de données à deux.
Nous avons donc des diapositives gratuites dans notre carrousel, donc trois indicateurs suffisent.
Maintenant, nous allons également ajouter quelques contrôles à
ce carrousel qui nous permet de faire défiler manuellement le carrousel.
Pour ce faire, je vais introduire un A avec
la classe carousel-control-prev ici.
Donc, cela me permettrait d'aller à la diapositive précédente, de
rendre le href égal à mycarrousel, de
sorte que vous pouvez voir que nous essayons de cibler le carrousel là-bas et le rôle est un bouton.
Donc, cela va agir comme un bouton et une diapositive de données comme précédent.
Donc, dans ce A,
je vais introduire une icône
pour représenter ce contrôle à l'écran.
Donc, je vais dire, span classe carousel-control-prev-icon
et fermer la travée ici.
Je vais maintenant copier ce contrôle.
Et collez-le ici et puis créez le contrôle pour la diapositive suivante ici donc je dirais,
carousel-control-next and roll est un bouton et la diapositive de données utilisée pour
suivante et l'icône serait carousel-control-next icône.
Donc, en ajoutant ça dans mon carrousel,
allons jeter un oeil à notre carrousel en ce moment. En
allant au carrousel,
vous pouvez maintenant voir que dans mon carrousel j'ai trois boutons indicateurs ici,
qui indiquent quelle diapositive particulière est
actuellement visible dans mon carrousel et que les diapositives glissent,
puis l'indicateur change également en conséquence pour
indiquer quelle diapositive particulière est visible.
Je peux cliquer manuellement sur l'un d'eux et aller à la diapositive spécifique dans le carrousel.
Non seulement cela, vous pouvez voir qu'il y a maintenant deux indicateurs,
la gauche et la droite,
que je peux utiliser pour faire défiler à nouveau le carrousel
en cliquant sur ces indicateurs ici.
Donc, en utilisant ces contrôles, à
la fois le contrôle précédent et le contrôle suivant et les indicateurs ici,
je peux naviguer vers la diapositive spécifique dans mon carrousel.
Ceci complète cet exercice.
C' est le bon moment pour vous de faire un git-commit avec le carrousel de message.