1 00:00:03,650 --> 00:00:09,125 Wir haben gerade in der vorangegangenen Vorlesung etwas über die Karussellkomponente erfahren. 2 00:00:09,125 --> 00:00:14,324 In dieser Übung fügen wir ein Karussell zu unserer 3 00:00:14,324 --> 00:00:20,760 Seite index.html hinzu und lernen dabei, wie die Karussellkomponente funktioniert. 4 00:00:20,760 --> 00:00:24,090 Gehen Sie zu index.html Seite, 5 00:00:24,090 --> 00:00:29,640 fügen wir in einer neuen Zeile in das Content div, 6 00:00:29,640 --> 00:00:31,730 als erste Zeile im div. 7 00:00:31,730 --> 00:00:33,595 Also werde ich hineingehen und sagen, 8 00:00:33,595 --> 00:00:43,535 geben Sie div Klasse Zeileninhalt und in diesem div 9 00:00:43,535 --> 00:00:47,545 werden wir die Karussellkomponente erstellen. 10 00:00:47,545 --> 00:00:56,925 Und in was div ist, werde ich in der inneren Spalte div hinzufügen, 11 00:00:56,925 --> 00:01:02,045 die hier die Karussellkomponente enthalten wird. 12 00:01:02,045 --> 00:01:04,135 Um das Karussell hinzuzufügen, 13 00:01:04,135 --> 00:01:13,630 werde ich hier im div mit der ID mein Karussell und 14 00:01:13,630 --> 00:01:17,440 ein Klassenkarussell und 15 00:01:17,440 --> 00:01:24,170 Slide und die Datenfahrklasse hinzufügen. 16 00:01:24,170 --> 00:01:33,110 Sie können also sehen, wie die JavaScript-Komponente hier in Aktion kommt, 17 00:01:33,110 --> 00:01:42,420 und dann das div schließen und anfangen, das Karussell in diesem div hier auszubauen. 18 00:01:42,420 --> 00:01:44,995 Also, in dieses Karussell, 19 00:01:44,995 --> 00:01:49,580 fügen wir den Inhalt des Karussell als nächstes hinzu. 20 00:01:49,580 --> 00:01:54,700 Also gehe ich hinein und füge dann ein weiteres div mit dem 21 00:01:56,740 --> 00:02:07,815 Klassenkarussel-inner und der Rolle als Listenfeld hinzu. 22 00:02:07,815 --> 00:02:15,380 Dies ist die Art, wie wir das Karussell aufbauen und dann dieses div dort schließen. 23 00:02:15,380 --> 00:02:22,955 Und in diesem div werden wir wieder divs vorstellen, die 24 00:02:22,955 --> 00:02:32,855 die Elemente des Karussell hosten, indem Sie die Karussell Elementklasse anwenden. 25 00:02:32,855 --> 00:02:37,120 Und der erste im Karussell... 26 00:02:37,240 --> 00:02:41,080 Die erste in der Karussellklasse, 27 00:02:41,080 --> 00:02:42,595 werde ich die aktive Klasse anwenden. 28 00:02:42,595 --> 00:02:48,235 Das ist also das erste div, 29 00:02:48,235 --> 00:02:56,650 das die Startfolie dort und die restlichen enthält, die ich hinzufügen werde. 30 00:02:56,650 --> 00:03:09,680 Lassen Sie mich 31 00:03:09,680 --> 00:03:16,630 hier zwei weitere Karussel-Item-Divs hinzufügen und nur das erste mit der aktiven Klasse anwenden. 32 00:03:16,630 --> 00:03:21,445 Jetzt werde ich in den Inhalt in diesem Karussell Artikel vorstellen. 33 00:03:21,445 --> 00:03:25,165 Um also ein Karussell zu konstruieren, 34 00:03:25,165 --> 00:03:33,770 werde ich dorthin gehen und dann ein Bild mit der Klasse d-block einschließen. 35 00:03:33,770 --> 00:03:35,655 Dies wird also verwendet, 36 00:03:35,655 --> 00:03:43,930 dies ist eine Flex-Klasse, die es ermöglicht, unser Bild richtig positioniert zu werden und dann 37 00:03:43,930 --> 00:03:53,240 die Bildflüssigkeitsklasse und dann die Quelle als img hinzuzufügen. 38 00:03:58,220 --> 00:04:03,595 Was ich also tun werde, ist, diesen Inhalt aus 39 00:04:03,595 --> 00:04:09,020 den drei Inhaltszeilen unten zu verschieben und ihn dann in das Karussell hier hinzuzufügen. 40 00:04:15,470 --> 00:04:21,710 Also füge ich hier und dann zum Karussell ein Bild 41 00:04:21,710 --> 00:04:23,340 hinzu, ich kann auch 42 00:04:23,340 --> 00:04:28,200 ein div mit 43 00:04:28,200 --> 00:04:34,030 der Klassenkarussell Beschriftung hinzufügen. 44 00:04:34,030 --> 00:04:38,780 Hier können wir einen Text einschließen, der als Beschriftung auf das Bild weitergeleitet wird. 45 00:04:38,780 --> 00:04:48,450 Also sage ich Karussellunterschrift d-none, d-md-block. 46 00:04:48,740 --> 00:04:52,555 Und dann im Inneren 47 00:04:52,555 --> 00:04:59,490 werde ich den Inhalt aus den Inhaltszeilen hier einschließen. 48 00:04:59,490 --> 00:05:04,600 Also gehe ich hinein und kopiere den Inhalt aus den Inhaltszeilen 49 00:05:04,600 --> 00:05:14,330 hier und füge ihn dann in den Karussellbeschriftungsblock ein. 50 00:05:25,320 --> 00:05:32,315 Und ich werde die Klasse, die wir auf das H2 angewendet haben, aus diesem Inhalt entfernen. 51 00:05:32,315 --> 00:05:35,850 Nun wiederholen wir das Gleiche für die verbleibenden beiden, indem wir 52 00:05:35,850 --> 00:05:40,820 den Inhalt aus den Inhaltszeilen unten hier kopieren. 53 00:05:40,820 --> 00:05:43,645 Also, lassen Sie mich das abschließen und dann kommen wir zurück und 54 00:05:43,645 --> 00:05:47,225 schauen uns an, wie das Karussell aussieht. 55 00:05:47,225 --> 00:05:49,940 Hier können Sie sehen, dass ich 56 00:05:49,940 --> 00:05:56,440 die restlichen Karussellelemente hier abgeschlossen habe, indem ich den Inhalt aus den folgenden Inhaltszeilen kopiere. 57 00:05:56,440 --> 00:06:04,190 Lassen Sie uns ein paar CSS-Klassen hinzufügen, so dass das Karussell schön strukturiert ist. 58 00:06:04,190 --> 00:06:10,235 Also gehe ich zu styles.css Datei unten hier, 59 00:06:10,235 --> 00:06:17,410 werde ich hier ein paar weitere Klassen hinzufügen. 60 00:06:17,410 --> 00:06:19,710 Für die Karussellklasse 61 00:06:19,710 --> 00:06:25,310 würde ich den Hintergrund als 512DA8 hinzufügen 62 00:06:25,310 --> 00:06:30,280 , den wir vor der dunkelfarbigen Klasse verwendet haben. 63 00:06:30,280 --> 00:06:39,825 Und dann für die Karussellartikel-Klasse 64 00:06:39,825 --> 00:06:47,400 werde ich in einer Höhe als 300 Pixel hinzufügen. 65 00:06:48,030 --> 00:06:59,195 Und für das Bild, das im Karussell enthalten ist, 66 00:06:59,195 --> 00:07:03,480 werde ich hier ein paar Transformationen anwenden. 67 00:07:03,480 --> 00:07:10,830 Ich würde sagen, Position absolut. 68 00:07:10,830 --> 00:07:14,360 Ich möchte es nach links positionieren. 69 00:07:19,470 --> 00:07:29,290 Diese obere und linke Null positioniert dieses Bild also am oberen linken Rand 70 00:07:29,290 --> 00:07:33,700 der Karussellbox dort und mit 71 00:07:33,700 --> 00:07:41,050 einer minimalen Höhe von 300 Pixel, um die Höhe der Karussellgegenstände anzupassen. 72 00:07:41,050 --> 00:07:45,680 Dieses Bild dehnt sich also im Wesentlichen die gesamte Höhe 73 00:07:45,680 --> 00:07:51,020 des Karussell aus, wird hier aber am linken Rand der Karussellbox positioniert. 74 00:07:51,020 --> 00:07:52,820 Also lassen Sie mich die Änderungen speichern. 75 00:07:52,820 --> 00:07:58,235 Wir schauen uns einfach an, wie dieses Karussell auf unserer Webseite aussieht. Wenn Sie 76 00:07:58,235 --> 00:07:59,770 auf die Webseite gehen, 77 00:07:59,770 --> 00:08:05,460 können Sie dieses Karussell jetzt in Aktion auf unserer Indexstudie Tabellenseite sehen. 78 00:08:05,460 --> 00:08:09,000 So können Sie sehen, dass das Karussell 79 00:08:09,000 --> 00:08:13,905 hier oben positioniert ist und dann werden wir in regelmäßigen Abständen weiter scrollen. 80 00:08:13,905 --> 00:08:16,470 Beachten Sie, wie 81 00:08:16,470 --> 00:08:21,925 ich mit den CSS-Klassen den Hintergrund aus dem Karussell so gestaltet habe, dass die Beschriftungen 82 00:08:21,925 --> 00:08:24,745 im Karussell deutlich sichtbar sind 83 00:08:24,745 --> 00:08:28,305 und auch, wie das Bild auf dem Karussell positioniert wurde. 84 00:08:28,305 --> 00:08:33,865 Die Höhe dieses Karussellschiebers ist auf 300 Pixel fixiert. 85 00:08:33,865 --> 00:08:37,750 Also, dies gibt ein schönes sauberes Layout für dieses Karussell. 86 00:08:37,750 --> 00:08:42,855 Fügen wir nun ein paar Steuerelemente für dieses Karussell hinzu. 87 00:08:42,855 --> 00:08:46,155 Gehen Sie zurück zu index.html. 88 00:08:46,155 --> 00:08:56,015 Gleich nach dem Karussell in unserer Box hier, aber immer noch im Karussell, 89 00:08:56,015 --> 00:09:05,170 werde ich ein OL hinzufügen, um ein paar manuelle Kontrollen für das Karussell einzuführen. 90 00:09:05,170 --> 00:09:10,490 Und mit der Klasse Karussell Indikatoren. 91 00:09:12,400 --> 00:09:16,570 Diese Indikatoren werden auf 92 00:09:16,570 --> 00:09:24,095 den Karussellfolien positioniert, um anzuzeigen, welche Folie gerade angezeigt wird. 93 00:09:24,095 --> 00:09:28,760 Also lassen Sie mich hier in den Inhalt einführen, so dass ich OL sage, 94 00:09:28,760 --> 00:09:30,630 ich benutze das OL dafür. 95 00:09:30,630 --> 00:09:34,175 Und dann, da drin benutze ich die Liste mit 96 00:09:34,175 --> 00:09:42,175 dem Datenziel, das auf mein Karussell gesetzt ist. 97 00:09:42,175 --> 00:09:49,460 Dies ist also die ID des Karussell und Daten-Dia-to. 98 00:09:49,460 --> 00:09:55,880 Und die ersten Indikatoren werden auf die Foliennummer Null gleiten. 99 00:09:56,870 --> 00:10:08,080 Mit dieser Klasse als aktiv für das erste Element in dieser Liste, 100 00:10:08,460 --> 00:10:18,870 dann werde ich die verbleibenden zwei Elemente einfach Liste mit dem Datenziel verwenden, das 101 00:10:18,870 --> 00:10:24,510 meinem Karussell entspricht 102 00:10:24,510 --> 00:10:30,310 und die Daten-Slide-to auf eins gesetzt ist. 103 00:10:30,310 --> 00:10:33,150 Also, das ist für die zweite Folie dort. 104 00:10:33,150 --> 00:10:38,755 Ich werde diese nur kopieren und dann den dritten Indikator hier drin erstellen. 105 00:10:38,755 --> 00:10:47,740 Also gehen wir hinein und kopieren das und ändern es dann in Daten-Dia-to zwei. 106 00:10:47,740 --> 00:10:54,685 So haben wir freie Dias in unserem Karussell, so dass drei Indikatoren ausreichend sind. 107 00:10:54,685 --> 00:10:58,540 Nun werden wir auch ein paar Steuerelemente zu 108 00:10:58,540 --> 00:11:02,435 diesem Karussell hinzufügen, mit denen wir manuell das Karussell scrollen können. 109 00:11:02,435 --> 00:11:06,580 Um das zu tun, werde ich 110 00:11:06,580 --> 00:11:13,705 hier ein A mit der Klasse Carousel-control-prev vorstellen. 111 00:11:13,705 --> 00:11:17,065 Dies würde mir erlauben, zur vorherigen Folie zu gehen, 112 00:11:17,065 --> 00:11:22,710 die href gleich mycarussel zu machen, 113 00:11:22,710 --> 00:11:30,220 so dass Sie sehen können, dass wir versuchen, das Karussell dort zu zielen und die Rolle ist eine Schaltfläche. 114 00:11:30,220 --> 00:11:38,730 Dies wird also als Schaltfläche und Daten-Folie wie zuvor fungieren. 115 00:11:38,730 --> 00:11:41,620 In diesem A 116 00:11:44,530 --> 00:11:52,635 werde ich ein Symbol einführen, 117 00:11:52,635 --> 00:11:55,810 um dieses Steuerelement auf dem Bildschirm darzustellen. 118 00:11:55,810 --> 00:12:01,310 Also, ich werde sagen, Spanne Klasse Karussel-Control-Prev-Icon 119 00:12:01,960 --> 00:12:12,560 und schließen Sie die Spannweite hier. 120 00:12:12,560 --> 00:12:18,210 Ich werde dieses Steuerelement jetzt kopieren. 121 00:12:19,890 --> 00:12:28,950 Und fügen Sie es hier ein und erstellen Sie dann das Steuerelement für die nächste Folie hier, so würde ich sagen, 122 00:12:28,950 --> 00:12:34,440 carousel-control-next und roll ist eine Schaltfläche und die Datenfolie verwendet, um 123 00:12:34,440 --> 00:12:41,315 die nächste und das Symbol wäre carousel-control-next icon. 124 00:12:41,315 --> 00:12:45,275 Also füge ich diese in mein Karussell ein, 125 00:12:45,275 --> 00:12:49,595 lass uns in diesem Moment einen Blick auf unser Karussell werfen. Wenn Sie 126 00:12:49,595 --> 00:12:51,395 zum Karussell gehen, 127 00:12:51,395 --> 00:12:57,325 können Sie jetzt sehen, dass ich in meinem Karussell drei Indikatortasten hier habe, 128 00:12:57,325 --> 00:13:02,830 welche bestimmte Folie 129 00:13:02,830 --> 00:13:08,085 derzeit in meinem Karussell sichtbar ist und wie die Dias gleiten, 130 00:13:08,085 --> 00:13:11,380 dann ändert sich auch der Indikator entsprechend, um 131 00:13:11,380 --> 00:13:15,150 anzuzeigen, welche Folie sichtbar. 132 00:13:15,150 --> 00:13:21,810 Ich kann manuell auf einen von ihnen klicken und auf die spezifische Folie im Karussell gehen. 133 00:13:21,810 --> 00:13:26,320 Nicht nur das, Sie können sehen, dass es jetzt zwei Indikatoren gibt, 134 00:13:26,320 --> 00:13:27,980 die linke und rechte, mit 135 00:13:27,980 --> 00:13:32,120 denen ich wieder durch das Karussell blättern kann, 136 00:13:32,120 --> 00:13:36,715 indem Sie hier auf diese Indikatoren klicken. 137 00:13:36,715 --> 00:13:38,490 Mit diesen Steuerelementen, 138 00:13:38,490 --> 00:13:43,660 sowohl dem vorherigen als auch dem nächsten Steuerelement und den Indikatoren hier, 139 00:13:43,660 --> 00:13:51,155 kann ich zu der spezifischen Folie in meinem Karussell navigieren. 140 00:13:51,155 --> 00:13:53,635 Damit ist diese Übung abgeschlossen. 141 00:13:53,635 --> 00:13:59,350 Dies ist ein guter Zeitpunkt für Sie, ein Git-Commit mit dem Message-Karussell zu machen.