Hvordan lage en karusell/lysbildefremvisning i Bootstrap 5

Karusell er en dynamisk presentasjon av innhold der tekster og bilder kombineres sammen for å gjøre ting synlige og tilgjengelige for brukeren ved å sykle dem igjen og igjen.Karusell brukes til å vise frem den nylige eller eksklusive aktiviteten på et nettsted og gjøre det enkelt for brukeren å utforske uten problemer.

Denne artikkelen handler om

• Lag en karusell
• Karusell med bildetekst
• Trinn for trinnprosess for å lage en karusell

Hvordan lage en karusell

For å lage en karusellbruk .karusell klasse sammen med data-bs-ride = ”karusell” attributt, pakk den deretter rundt divene med klasser .karusellindikatorer For å legge til navigasjonsknapper, .karusell-inner For å legge til karusellbilder, .Karusellkontroll-prev For å legge til forrige lysbilde -knapp, .Karusellkontroll-ved siden av å legge til
Neste lysbilde -knapp.

Kode

Trinn 1

Legg til .karusell klasse for å lage en karusell

Kode

I kode ovenfor, .karusell-inner Klasse brukes til å legge lysbilder til en karusell og til å legge innhold til hver lysbildebruk .Karusellelement klasse. Legg til CSS -overgang og animasjonseffekt når du beveger deg fra en lysbilde til et annet .lysbilde klasse.

Steg 2

Legg til .karusellindikatorer Klasse for å legge til knapper i karusell:

Slik lager du karusellindikatorer.

Trinn 3

Legg til .Karusellkontroll-prev og .Karusellkontroll-Prev-Icon sammen for å opprette og bruke en tidligere knapp for å gå tilbake til forrige lysbilde.

Legg til .Karusellkontroll-ved siden av og .Karusellkontroll-vedisent sammen for å opprette og bruke en neste knapp for å gå til neste lysbilde.

Slik opprettes karusellen neste og forrige lysbildeknapper.

Hvordan lage en karusell med bildetekst

For å legge til en bildetekst i et lysbilde, bare legg til en div med en klasse .Karusell-klemmede Inne i diven med en klasse .Karusellelement.

Kode

Første lysbilde

Dette er det første lysbildet med bildetekst

På denne måten kan du legge bildetekster til karusellen din.

Konklusjon

For å lage en karusellbruk .karusell klasse sammen med data-bs-ride = ”karusell” attributt, pakk den deretter rundt divene med klasser .karusellindikatorer For å legge til navigasjonsknapper, .karusell-inner For å legge til karusellbilder, .Karusellkontroll-prev For å legge til forrige lysbilde -knapp, .Karusellkontroll-ved siden av å legge til
Neste lysbilde -knapp. I artikkelen ovenfor blir prosessen med å lage en karusell forklart med eksempler for å gjøre det enkelt for deg å forstå og lage din egen karusell.