1 00:00:03,650 --> 00:00:09,125 Nous venons d'apprendre sur le composant carrousel lors de la conférence précédente. 2 00:00:09,125 --> 00:00:14,324 Dans cet exercice, nous allons ajouter un carrousel à notre 3 00:00:14,324 --> 00:00:20,760 page index.html et, dans le processus, apprendre comment fonctionne le composant carrousel. 4 00:00:20,760 --> 00:00:24,090 Aller à la page index.html, 5 00:00:24,090 --> 00:00:29,640 nous allons ajouter une nouvelle ligne dans la div de contenu, 6 00:00:29,640 --> 00:00:31,730 comme la première ligne dans la div. 7 00:00:31,730 --> 00:00:33,595 Donc, je vais entrer et dire, 8 00:00:33,595 --> 00:00:43,535 donner le contenu de ligne de classe div et à l'intérieur de cette div, 9 00:00:43,535 --> 00:00:47,545 nous allons créer le composant carrousel. 10 00:00:47,545 --> 00:00:56,925 Et dans ce qui est div, j'ajouterai dans la colonne intérieure div, 11 00:00:56,925 --> 00:01:02,045 qui contiendra le composant carrousel ici. 12 00:01:02,045 --> 00:01:04,135 Pour ajouter le carrousel, 13 00:01:04,135 --> 00:01:13,630 ici, je vais ajouter dans le div avec l'ID mon carrousel et un carrousel de 14 00:01:13,630 --> 00:01:17,440 classe et une 15 00:01:17,440 --> 00:01:24,170 diapositive et la classe de ride de données. 16 00:01:24,170 --> 00:01:33,110 Donc, vous pouvez voir le composant JavaScript entrer en action ici, 17 00:01:33,110 --> 00:01:42,420 puis fermer la div et commencer à construire le carrousel à l'intérieur de cette div ici. 18 00:01:42,420 --> 00:01:44,995 Dans ce carrousel, 19 00:01:44,995 --> 00:01:49,580 nous ajouterons ensuite le contenu du carrousel. 20 00:01:49,580 --> 00:01:54,700 Donc, je vais entrer et puis ajouter un autre div avec le 21 00:01:56,740 --> 00:02:07,815 carousel-inner de classe et le rôle comme zone de liste. 22 00:02:07,815 --> 00:02:15,380 C' est la façon dont nous construisons le carrousel et puis fermons cette div là. 23 00:02:15,380 --> 00:02:22,955 Et à l'intérieur de cette div encore une fois, nous allons introduire des divs qui hébergeront 24 00:02:22,955 --> 00:02:32,855 les éléments du carrousel en appliquant la classe d'élément de carrousel. 25 00:02:32,855 --> 00:02:37,120 Et le premier dans le carrousel... 26 00:02:37,240 --> 00:02:41,080 Le premier de la classe carrousel, 27 00:02:41,080 --> 00:02:42,595 je vais appliquer la classe active. 28 00:02:42,595 --> 00:02:48,235 Donc, c'est la première div qui commence à contenir 29 00:02:48,235 --> 00:02:56,650 la diapositive de départ là-bas et les autres, je vais ajouter. 30 00:02:56,650 --> 00:03:09,680 Permettez-moi d'ajouter deux autres divs carousel-item 31 00:03:09,680 --> 00:03:16,630 ici et d'appliquer seulement le premier avec la classe active. 32 00:03:16,630 --> 00:03:21,445 Maintenant, je vais introduire dans le contenu de ce carrousel articles. 33 00:03:21,445 --> 00:03:25,165 Donc, pour construire un élément de carrousel, 34 00:03:25,165 --> 00:03:33,770 je vais y aller et ensuite inclure une image avec le bloc d de classe. 35 00:03:33,770 --> 00:03:35,655 Donc, ceci est utilisé pour, 36 00:03:35,655 --> 00:03:43,930 c'est une classe flex qui permet à notre image d'être correctement positionnée, puis ajouter dans 37 00:03:43,930 --> 00:03:53,240 la classe de fluide d'image, puis la source comme img. 38 00:03:58,220 --> 00:04:03,595 Donc, ce que je vais faire est de déplacer ce contenu à partir 39 00:04:03,595 --> 00:04:09,020 des trois lignes de contenu ci-dessous, puis l'ajouter dans le carrousel ici. 40 00:04:15,470 --> 00:04:21,710 Donc, j'ajoute une image ici et ensuite au carrousel, 41 00:04:21,710 --> 00:04:23,340 je peux également ajouter dans 42 00:04:23,340 --> 00:04:28,200 un div avec 43 00:04:28,200 --> 00:04:34,030 la légende du carrousel de classe. 44 00:04:34,030 --> 00:04:38,780 Ici, nous pouvons inclure du texte qui sera plus relayé comme une légende sur l'image. 45 00:04:38,780 --> 00:04:48,450 Donc je dirai la légende du carrousel d-none, d-md-block. 46 00:04:48,740 --> 00:04:52,555 Et puis à l'intérieur ici, 47 00:04:52,555 --> 00:04:59,490 j'inclurai le contenu des lignes de contenu ici. 48 00:04:59,490 --> 00:05:04,600 Donc, je vais entrer et copier le contenu des lignes de contenu 49 00:05:04,600 --> 00:05:14,330 ici, puis le coller dans le bloc de légende du carrousel ici. 50 00:05:25,320 --> 00:05:32,315 Et je vais supprimer la classe que nous avons appliquée au H2 de ce contenu. 51 00:05:32,315 --> 00:05:35,850 Maintenant, nous allons répéter la même chose pour les deux autres en copiant 52 00:05:35,850 --> 00:05:40,820 le contenu à partir des lignes de contenu ci-dessous ici. 53 00:05:40,820 --> 00:05:43,645 Laisse-moi terminer ça et nous reviendrons 54 00:05:43,645 --> 00:05:47,225 voir à quoi ressemble le carrousel. 55 00:05:47,225 --> 00:05:49,940 Ici, vous pouvez voir que j'ai terminé 56 00:05:49,940 --> 00:05:56,440 les éléments de carrousel restants ici en copiant le contenu à partir des lignes de contenu ci-dessous. 57 00:05:56,440 --> 00:06:04,190 Ajoutons quelques classes CSS pour que le carrousel soit bien structuré. 58 00:06:04,190 --> 00:06:10,235 Donc, en allant au fichier styles.css en bas ici, 59 00:06:10,235 --> 00:06:17,410 je vais ajouter quelques classes supplémentaires ici. 60 00:06:17,410 --> 00:06:19,710 Pour la classe carrousel, 61 00:06:19,710 --> 00:06:25,310 j'ajouterais l'arrière-plan en tant que 512DA8, 62 00:06:25,310 --> 00:06:30,280 que nous avons utilisé avant la classe de couleur foncée. 63 00:06:30,280 --> 00:06:39,825 Et puis pour la classe carousel-item, 64 00:06:39,825 --> 00:06:47,400 je vais ajouter une hauteur de 300 pixels. 65 00:06:48,030 --> 00:06:59,195 Et pour l'image qui est incluse à l'intérieur de l'élément carrousel, 66 00:06:59,195 --> 00:07:03,480 je vais appliquer quelques transformations ici. 67 00:07:03,480 --> 00:07:10,830 Je dirais, position absolue. 68 00:07:10,830 --> 00:07:14,360 Je veux le positionner à gauche. 69 00:07:19,470 --> 00:07:29,290 Donc, ce zéro haut et gauche positionnera cette image sur le bord supérieur gauche de 70 00:07:29,290 --> 00:07:33,700 la boîte de carrousel là et avec 71 00:07:33,700 --> 00:07:41,050 une hauteur minimale définie à 300 pixels pour correspondre à la hauteur des articles de carrousel. 72 00:07:41,050 --> 00:07:45,680 Donc, cette image va essentiellement étirer toute la hauteur 73 00:07:45,680 --> 00:07:51,020 du carrousel mais sera positionnée sur le bord gauche de la boîte de carrousel ici. 74 00:07:51,020 --> 00:07:52,820 Laissez-moi enregistrer les changements. 75 00:07:52,820 --> 00:07:58,235 Nous allons juste aller voir à quoi ressemble ce carrousel sur notre page web. 76 00:07:58,235 --> 00:07:59,770 En allant sur la page Web, 77 00:07:59,770 --> 00:08:05,460 vous pouvez maintenant voir ce carrousel en action sur notre page de table d'étude d'index. 78 00:08:05,460 --> 00:08:09,000 Donc, vous pouvez voir que le carrousel est 79 00:08:09,000 --> 00:08:13,905 positionné en haut ici et ensuite nous continuerons à défiler à intervalles réguliers. 80 00:08:13,905 --> 00:08:16,470 Notez comment en utilisant les classes CSS, 81 00:08:16,470 --> 00:08:21,925 j'ai stylé l'arrière-plan du carrousel de sorte que les légendes soient 82 00:08:21,925 --> 00:08:24,745 clairement visibles dans le carrousel 83 00:08:24,745 --> 00:08:28,305 et aussi comment l'image a été positionnée sur le carrousel. 84 00:08:28,305 --> 00:08:33,865 La hauteur de cette diapositive de carrousel est fixée à 300 pixels. 85 00:08:33,865 --> 00:08:37,750 Donc, cela donne une belle disposition propre pour ce carrousel. 86 00:08:37,750 --> 00:08:42,855 Maintenant, ajoutons quelques contrôles pour ce carrousel. 87 00:08:42,855 --> 00:08:46,155 Revenir à index.html. 88 00:08:46,155 --> 00:08:56,015 Juste après le carrousel dans notre boîte, mais toujours à l'intérieur du carrousel, 89 00:08:56,015 --> 00:09:05,170 je vais ajouter un OL pour introduire quelques commandes manuelles pour le carrousel. 90 00:09:05,170 --> 00:09:10,490 Et avec les indicateurs de carrousel de classe. 91 00:09:12,400 --> 00:09:16,570 Ces indicateurs seront placés sur 92 00:09:16,570 --> 00:09:24,095 les diapositives du carrousel pour indiquer quelle diapositive particulière est actuellement affichée. 93 00:09:24,095 --> 00:09:28,760 Alors laissez-moi vous présenter dans le contenu ici donc je dis OL, 94 00:09:28,760 --> 00:09:30,630 j'utilise l'OL pour cela. 95 00:09:30,630 --> 00:09:34,175 Et puis, à l'intérieur, j'utilise la liste avec 96 00:09:34,175 --> 00:09:42,175 la cible de données définie sur mon carrousel. 97 00:09:42,175 --> 00:09:49,460 C' est donc l'ID du carrousel et des données slide-to. 98 00:09:49,460 --> 00:09:55,880 Et les premiers indicateurs glisseront à la diapositive numéro zéro. 99 00:09:56,870 --> 00:10:08,080 Avec cette classe comme active pour le premier élément de cette liste, 100 00:10:08,460 --> 00:10:18,870 alors les deux éléments restants que je vais simplement utiliser la liste avec la cible de données 101 00:10:18,870 --> 00:10:24,510 définie égale à mon carrousel 102 00:10:24,510 --> 00:10:30,310 et le data-slide-to est défini sur un. 103 00:10:30,310 --> 00:10:33,150 Donc, c'est pour la deuxième diapositive là-bas. 104 00:10:33,150 --> 00:10:38,755 Je vais juste copier celui-ci, puis créer le troisième indicateur ici. 105 00:10:38,755 --> 00:10:47,740 Donc, nous allons entrer et copier ceci, puis changer ceci en diapositive de données à deux. 106 00:10:47,740 --> 00:10:54,685 Nous avons donc des diapositives gratuites dans notre carrousel, donc trois indicateurs suffisent. 107 00:10:54,685 --> 00:10:58,540 Maintenant, nous allons également ajouter quelques contrôles à 108 00:10:58,540 --> 00:11:02,435 ce carrousel qui nous permet de faire défiler manuellement le carrousel. 109 00:11:02,435 --> 00:11:06,580 Pour ce faire, je vais introduire un A avec 110 00:11:06,580 --> 00:11:13,705 la classe carousel-control-prev ici. 111 00:11:13,705 --> 00:11:17,065 Donc, cela me permettrait d'aller à la diapositive précédente, de 112 00:11:17,065 --> 00:11:22,710 rendre le href égal à mycarrousel, de 113 00:11:22,710 --> 00:11:30,220 sorte que vous pouvez voir que nous essayons de cibler le carrousel là-bas et le rôle est un bouton. 114 00:11:30,220 --> 00:11:38,730 Donc, cela va agir comme un bouton et une diapositive de données comme précédent. 115 00:11:38,730 --> 00:11:41,620 Donc, dans ce A, 116 00:11:44,530 --> 00:11:52,635 je vais introduire une icône 117 00:11:52,635 --> 00:11:55,810 pour représenter ce contrôle à l'écran. 118 00:11:55,810 --> 00:12:01,310 Donc, je vais dire, span classe carousel-control-prev-icon 119 00:12:01,960 --> 00:12:12,560 et fermer la travée ici. 120 00:12:12,560 --> 00:12:18,210 Je vais maintenant copier ce contrôle. 121 00:12:19,890 --> 00:12:28,950 Et collez-le ici et puis créez le contrôle pour la diapositive suivante ici donc je dirais, 122 00:12:28,950 --> 00:12:34,440 carousel-control-next and roll est un bouton et la diapositive de données utilisée pour 123 00:12:34,440 --> 00:12:41,315 suivante et l'icône serait carousel-control-next icône. 124 00:12:41,315 --> 00:12:45,275 Donc, en ajoutant ça dans mon carrousel, 125 00:12:45,275 --> 00:12:49,595 allons jeter un oeil à notre carrousel en ce moment. En 126 00:12:49,595 --> 00:12:51,395 allant au carrousel, 127 00:12:51,395 --> 00:12:57,325 vous pouvez maintenant voir que dans mon carrousel j'ai trois boutons indicateurs ici, 128 00:12:57,325 --> 00:13:02,830 qui indiquent quelle diapositive particulière est 129 00:13:02,830 --> 00:13:08,085 actuellement visible dans mon carrousel et que les diapositives glissent, 130 00:13:08,085 --> 00:13:11,380 puis l'indicateur change également en conséquence pour 131 00:13:11,380 --> 00:13:15,150 indiquer quelle diapositive particulière est visible. 132 00:13:15,150 --> 00:13:21,810 Je peux cliquer manuellement sur l'un d'eux et aller à la diapositive spécifique dans le carrousel. 133 00:13:21,810 --> 00:13:26,320 Non seulement cela, vous pouvez voir qu'il y a maintenant deux indicateurs, 134 00:13:26,320 --> 00:13:27,980 la gauche et la droite, 135 00:13:27,980 --> 00:13:32,120 que je peux utiliser pour faire défiler à nouveau le carrousel 136 00:13:32,120 --> 00:13:36,715 en cliquant sur ces indicateurs ici. 137 00:13:36,715 --> 00:13:38,490 Donc, en utilisant ces contrôles, à 138 00:13:38,490 --> 00:13:43,660 la fois le contrôle précédent et le contrôle suivant et les indicateurs ici, 139 00:13:43,660 --> 00:13:51,155 je peux naviguer vers la diapositive spécifique dans mon carrousel. 140 00:13:51,155 --> 00:13:53,635 Ceci complète cet exercice. 141 00:13:53,635 --> 00:13:59,350 C' est le bon moment pour vous de faire un git-commit avec le carrousel de message.