Jak utworzyć karuzel/slajdów w Bootstrap 5

Karuzela jest dynamiczną prezentacją treści, w której teksty i obrazy są łączone, aby sprawić, że wszystko jest widoczne i dostępne dla użytkownika, poprzez jeździe na rowerze.Carousel służy do zaprezentowania najnowszej lub ekskluzywnej aktywności na stronie internetowej i ułatwienia użytkownikowi eksploracji bez problemu.

Ten artykuł jest o

• Utwórz karuzelę
• Karuzela z podpisem
• Krok po kroku proces tworzenia karuzeli

Jak stworzyć karuzelę

Aby stworzyć karuzel .karuzela klasa wraz z Data-BS-Ride = ”karuzel” atrybut, a następnie owinąć go wokół Divs klasami .Indicatorzy karuzeli Aby dodać przyciski nawigacyjne, .Karuzel Aby dodać obrazy karuzeli, .Karuzel-Control-Prev Aby dodać poprzedni przycisk slajdów, .Karuzel-control-next dodać
Następny przycisk slajdów.

Kod

Krok 1

Dodać .karuzela Klasa, aby stworzyć Utwórz karuzelę

Kod

W powyższym kodzie, .Karuzel Klasa służy do dodawania szkiełek do karuzeli i dodawania zawartości do każdego użycia slajdu .Karuzel klasa. W przypadku efektu przejścia i animacji CSS podczas przechodzenia z jednego slajdu do drugiego, dodaj .slajd klasa.

Krok 2

Dodać .Indicatorzy karuzeli klasa, aby dodać guziki w karuzeli:

W ten sposób tworzysz wskaźniki karuzeli.

Krok 3

Dodać .Karuzel-Control-Prev I .Carousel-Control-Prev-Icon razem, aby utworzyć i użyć poprzedniego przycisku, aby wrócić do poprzedniego slajdu.

Dodać .Karuzel-control-next I .karuzel-control-next-icon razem, aby utworzyć i użyć następnego przycisku, aby przejść do następnego slajdu.

W ten sposób tworzone są karuzela i poprzednie przyciski slajdów.

Jak stworzyć karuzel z podpisem

Aby dodać podpis do slajdu, po prostu dodaj div z klasą .Kazanie karuzelowe wewnątrz div z klasą .Karuzel.

Kod

Pierwszy zjeżdżalnia

To jest pierwszy slajd z podpisem

W ten sposób możesz dodać podpisy do karuzeli.

Wniosek

Aby stworzyć karuzel .karuzela klasa wraz z Data-BS-Ride = ”karuzel” atrybut, a następnie owinąć go wokół Divs klasami .Indicatorzy karuzeli Aby dodać przyciski nawigacyjne, .Karuzel Aby dodać obrazy karuzeli, .Karuzel-Control-Prev Aby dodać poprzedni przycisk slajdów, .Karuzel-control-next dodać
Następny przycisk slajdów. W powyższym artykule proces tworzenia karuzeli wyjaśniono przykładami, aby ułatwić ci zrozumienie i stworzenie własnej karuzeli.