Wir haben gerade in der vorangegangenen Vorlesung etwas über die Karussellkomponente erfahren.
In dieser Übung fügen wir ein Karussell zu unserer
Seite index.html hinzu und lernen dabei, wie die Karussellkomponente funktioniert.
Gehen Sie zu index.html Seite,
fügen wir in einer neuen Zeile in das Content div,
als erste Zeile im div.
Also werde ich hineingehen und sagen,
geben Sie div Klasse Zeileninhalt und in diesem div
werden wir die Karussellkomponente erstellen.
Und in was div ist, werde ich in der inneren Spalte div hinzufügen,
die hier die Karussellkomponente enthalten wird.
Um das Karussell hinzuzufügen,
werde ich hier im div mit der ID mein Karussell und
ein Klassenkarussell und
Slide und die Datenfahrklasse hinzufügen.
Sie können also sehen, wie die JavaScript-Komponente hier in Aktion kommt,
und dann das div schließen und anfangen, das Karussell in diesem div hier auszubauen.
Also, in dieses Karussell,
fügen wir den Inhalt des Karussell als nächstes hinzu.
Also gehe ich hinein und füge dann ein weiteres div mit dem
Klassenkarussel-inner und der Rolle als Listenfeld hinzu.
Dies ist die Art, wie wir das Karussell aufbauen und dann dieses div dort schließen.
Und in diesem div werden wir wieder divs vorstellen, die
die Elemente des Karussell hosten, indem Sie die Karussell Elementklasse anwenden.
Und der erste im Karussell...
Die erste in der Karussellklasse,
werde ich die aktive Klasse anwenden.
Das ist also das erste div,
das die Startfolie dort und die restlichen enthält, die ich hinzufügen werde.
Lassen Sie mich
hier zwei weitere Karussel-Item-Divs hinzufügen und nur das erste mit der aktiven Klasse anwenden.
Jetzt werde ich in den Inhalt in diesem Karussell Artikel vorstellen.
Um also ein Karussell zu konstruieren,
werde ich dorthin gehen und dann ein Bild mit der Klasse d-block einschließen.
Dies wird also verwendet,
dies ist eine Flex-Klasse, die es ermöglicht, unser Bild richtig positioniert zu werden und dann
die Bildflüssigkeitsklasse und dann die Quelle als img hinzuzufügen.
Was ich also tun werde, ist, diesen Inhalt aus
den drei Inhaltszeilen unten zu verschieben und ihn dann in das Karussell hier hinzuzufügen.
Also füge ich hier und dann zum Karussell ein Bild
hinzu, ich kann auch
ein div mit
der Klassenkarussell Beschriftung hinzufügen.
Hier können wir einen Text einschließen, der als Beschriftung auf das Bild weitergeleitet wird.
Also sage ich Karussellunterschrift d-none, d-md-block.
Und dann im Inneren
werde ich den Inhalt aus den Inhaltszeilen hier einschließen.
Also gehe ich hinein und kopiere den Inhalt aus den Inhaltszeilen
hier und füge ihn dann in den Karussellbeschriftungsblock ein.
Und ich werde die Klasse, die wir auf das H2 angewendet haben, aus diesem Inhalt entfernen.
Nun wiederholen wir das Gleiche für die verbleibenden beiden, indem wir
den Inhalt aus den Inhaltszeilen unten hier kopieren.
Also, lassen Sie mich das abschließen und dann kommen wir zurück und
schauen uns an, wie das Karussell aussieht.
Hier können Sie sehen, dass ich
die restlichen Karussellelemente hier abgeschlossen habe, indem ich den Inhalt aus den folgenden Inhaltszeilen kopiere.
Lassen Sie uns ein paar CSS-Klassen hinzufügen, so dass das Karussell schön strukturiert ist.
Also gehe ich zu styles.css Datei unten hier,
werde ich hier ein paar weitere Klassen hinzufügen.
Für die Karussellklasse
würde ich den Hintergrund als 512DA8 hinzufügen
, den wir vor der dunkelfarbigen Klasse verwendet haben.
Und dann für die Karussellartikel-Klasse
werde ich in einer Höhe als 300 Pixel hinzufügen.
Und für das Bild, das im Karussell enthalten ist,
werde ich hier ein paar Transformationen anwenden.
Ich würde sagen, Position absolut.
Ich möchte es nach links positionieren.
Diese obere und linke Null positioniert dieses Bild also am oberen linken Rand
der Karussellbox dort und mit
einer minimalen Höhe von 300 Pixel, um die Höhe der Karussellgegenstände anzupassen.
Dieses Bild dehnt sich also im Wesentlichen die gesamte Höhe
des Karussell aus, wird hier aber am linken Rand der Karussellbox positioniert.
Also lassen Sie mich die Änderungen speichern.
Wir schauen uns einfach an, wie dieses Karussell auf unserer Webseite aussieht. Wenn Sie
auf die Webseite gehen,
können Sie dieses Karussell jetzt in Aktion auf unserer Indexstudie Tabellenseite sehen.
So können Sie sehen, dass das Karussell
hier oben positioniert ist und dann werden wir in regelmäßigen Abständen weiter scrollen.
Beachten Sie, wie
ich mit den CSS-Klassen den Hintergrund aus dem Karussell so gestaltet habe, dass die Beschriftungen
im Karussell deutlich sichtbar sind
und auch, wie das Bild auf dem Karussell positioniert wurde.
Die Höhe dieses Karussellschiebers ist auf 300 Pixel fixiert.
Also, dies gibt ein schönes sauberes Layout für dieses Karussell.
Fügen wir nun ein paar Steuerelemente für dieses Karussell hinzu.
Gehen Sie zurück zu index.html.
Gleich nach dem Karussell in unserer Box hier, aber immer noch im Karussell,
werde ich ein OL hinzufügen, um ein paar manuelle Kontrollen für das Karussell einzuführen.
Und mit der Klasse Karussell Indikatoren.
Diese Indikatoren werden auf
den Karussellfolien positioniert, um anzuzeigen, welche Folie gerade angezeigt wird.
Also lassen Sie mich hier in den Inhalt einführen, so dass ich OL sage,
ich benutze das OL dafür.
Und dann, da drin benutze ich die Liste mit
dem Datenziel, das auf mein Karussell gesetzt ist.
Dies ist also die ID des Karussell und Daten-Dia-to.
Und die ersten Indikatoren werden auf die Foliennummer Null gleiten.
Mit dieser Klasse als aktiv für das erste Element in dieser Liste,
dann werde ich die verbleibenden zwei Elemente einfach Liste mit dem Datenziel verwenden, das
meinem Karussell entspricht
und die Daten-Slide-to auf eins gesetzt ist.
Also, das ist für die zweite Folie dort.
Ich werde diese nur kopieren und dann den dritten Indikator hier drin erstellen.
Also gehen wir hinein und kopieren das und ändern es dann in Daten-Dia-to zwei.
So haben wir freie Dias in unserem Karussell, so dass drei Indikatoren ausreichend sind.
Nun werden wir auch ein paar Steuerelemente zu
diesem Karussell hinzufügen, mit denen wir manuell das Karussell scrollen können.
Um das zu tun, werde ich
hier ein A mit der Klasse Carousel-control-prev vorstellen.
Dies würde mir erlauben, zur vorherigen Folie zu gehen,
die href gleich mycarussel zu machen,
so dass Sie sehen können, dass wir versuchen, das Karussell dort zu zielen und die Rolle ist eine Schaltfläche.
Dies wird also als Schaltfläche und Daten-Folie wie zuvor fungieren.
In diesem A
werde ich ein Symbol einführen,
um dieses Steuerelement auf dem Bildschirm darzustellen.
Also, ich werde sagen, Spanne Klasse Karussel-Control-Prev-Icon
und schließen Sie die Spannweite hier.
Ich werde dieses Steuerelement jetzt kopieren.
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,
carousel-control-next und roll ist eine Schaltfläche und die Datenfolie verwendet, um
die nächste und das Symbol wäre carousel-control-next icon.
Also füge ich diese in mein Karussell ein,
lass uns in diesem Moment einen Blick auf unser Karussell werfen. Wenn Sie
zum Karussell gehen,
können Sie jetzt sehen, dass ich in meinem Karussell drei Indikatortasten hier habe,
welche bestimmte Folie
derzeit in meinem Karussell sichtbar ist und wie die Dias gleiten,
dann ändert sich auch der Indikator entsprechend, um
anzuzeigen, welche Folie sichtbar.
Ich kann manuell auf einen von ihnen klicken und auf die spezifische Folie im Karussell gehen.
Nicht nur das, Sie können sehen, dass es jetzt zwei Indikatoren gibt,
die linke und rechte, mit
denen ich wieder durch das Karussell blättern kann,
indem Sie hier auf diese Indikatoren klicken.
Mit diesen Steuerelementen,
sowohl dem vorherigen als auch dem nächsten Steuerelement und den Indikatoren hier,
kann ich zu der spezifischen Folie in meinem Karussell navigieren.
Damit ist diese Übung abgeschlossen.
Dies ist ein guter Zeitpunkt für Sie, ein Git-Commit mit dem Message-Karussell zu machen.