So erstellen Sie in Bootstrap 5 ein Karussell/eine Diashow

Karussell ist eine dynamische Präsentation von Inhalten, in dem Texte und Bilder zusammen kombiniert werden, um die Dinge für den Benutzer sichtbar und zugänglich zu machen, indem sie sie immer wieder fährt.Carousel wird verwendet, um die jüngsten oder exklusiven Aktivitäten auf einer Website zu präsentieren und es dem Benutzer leicht zu erleichtern, ohne Probleme zu erforschen.

Dieser Artikel ist über

• Erstellen Sie ein Karussell
• Karussell mit Bildunterschrift
• Schritt für Schritt der Erstellung eines Karussells

Wie man ein Karussell erstellt

Um einen Karussellgebrauch zu erstellen .Karussell Klasse zusammen mit Data-BS-Ride = "Karussell" Attribut, dann um die Divs mit Klassen umwickeln .Karussell-Indikatoren Fügen Sie Navigationsknöpfe hinzu, .Karussellinter Fügen Sie Karussellbilder hinzu, .Karussell-Kontroll-Prev So fügen Sie die vorherige Schaltfläche zur Folie hinzu, .Karussell-Kontroll-Next hinzufügen
Nächste Folie -Taste.

Code

Schritt 1

Hinzufügen .Karussell Klasse zum Erstellen eines Karussells erstellen

Code

Im obigen Code, .Karussellinter Die Klasse wird verwendet, um einem Karussell Objektträger hinzuzufügen und jeder Folie inhalt zu fügen .Karussell-Element Klasse. Für den CSS -Übergangs- und Animationseffekt, wenn Sie sich von einer Folie zum anderen bewegen, fügen Sie hinzu .gleiten Klasse.

Schritt 2

Hinzufügen .Karussell-Indikatoren Klasse zum Hinzufügen von Tasten in Karussell:

So erstellen Sie Karussellindikatoren.

Schritt 3

Hinzufügen .Karussell-Kontroll-Prev Und .Karussell-Kontroll-PREV-ICON zusammen, um eine vorherige Schaltfläche zu erstellen und zu verwenden, um zur vorherigen Folie zurückzukehren.

Hinzufügen .Karussell-Kontroll-Next Und .Karussell-Kontroll-Next-ICON zusammen, um eine nächste Schaltfläche zu erstellen und zu verwenden, um zur nächsten Folie zu gelangen.

So werden das Karussell nächste und vorherige Folientasten erstellt.

So erstellen Sie ein Karussell mit Bildunterschrift

Um einer Folie eine Bildunterschrift hinzuzufügen, fügen Sie einfach eine DIV mit einer Klasse hinzu .Karussell-Kapion im Div mit einer Klasse .Karussell-Element.

Code

Erste Folie

Dies ist die erste Folie mit Bildunterschrift

Auf diese Weise können Sie Ihrem Karussell Untertitel hinzufügen.

Abschluss

Um einen Karussellgebrauch zu erstellen .Karussell Klasse zusammen mit Data-BS-Ride = "Karussell" Attribut, dann um die Divs mit Klassen umwickeln .Karussell-Indikatoren Fügen Sie Navigationsknöpfe hinzu, .Karussellinter Fügen Sie Karussellbilder hinzu, .Karussell-Kontroll-Prev So fügen Sie die vorherige Schaltfläche zur Folie hinzu, .Karussell-Kontroll-Next hinzufügen
Nächste Folie -Taste. In dem obigen Artikel wird der Prozess der Erstellung eines Karussells mit Beispielen erläutert, um es Ihnen leicht zu erleichtern, Ihr eigenes Karussell zu verstehen und zu erstellen.