Come creare una giostra/presentazione in bootstrap 5

Giostra è una presentazione dinamica del contenuto in cui testi e immagini sono combinati insieme per rendere le cose visibili e accessibili per l'utente pedalando ancora e ancora.La giostra viene utilizzata per mostrare l'attività recente o esclusiva su un sito Web e rendere facile per l'utente esplorare senza alcun problema.

Questo articolo riguarda

• Crea una giostra
• Giostra con didascalia
• Processo passo passo per la creazione di una giostra

Come creare una giostra

Per creare un uso della giostra .giostra classe insieme a Data-BS-Ride = "giostra" attribuire, quindi avvolgerlo attorno ai div con le classi .Carousel-indicatori Per aggiungere pulsanti di navigazione, .giostra-interno Per aggiungere immagini di giostra, .carosello-controllo prev Per aggiungere il pulsante di diapositiva precedente, .Carousel-Control-Next aggiungere
Pulsante diapositiva successiva.

Codice

Passo 1

Aggiungere .giostra Classe per creare Crea una giostra

Codice

Nel codice sopra, .giostra-interno La classe viene utilizzata per aggiungere diapositive a una giostra e per aggiungere contenuto ad ogni diapositiva Utilizzo .carosel-item classe. Per la transizione CSS e l'effetto di animazione quando si sposta da una diapositiva all'altra, aggiungi .diapositiva classe.

Passo 2

Aggiungere .Carousel-indicatori Classe per aggiungere pulsanti nella giostra:

Ecco come crei indicatori di giostra.

Passaggio 3

Aggiungere .carosello-controllo prev E .carosello-controllo prev-icon insieme per creare e utilizzare un pulsante precedente per tornare alla diapositiva precedente.

Aggiungere .Carousel-Control-Next E .giostra-controllo-next-icon Insieme per creare e utilizzare un pulsante successivo per andare alla diapositiva successiva.

Ecco come vengono creati i pulsanti di diapositiva successiva e precedenti.

Come creare una giostra con didascalia

Per aggiungere una didascalia a una diapositiva, aggiungi un div con una classe .Capo di carosello All'interno del div con una classe .carosel-item.

Codice

Prima diapositiva

Questa è la prima diapositiva con la didascalia

In questo modo puoi aggiungere didascalie alla tua giostra.

Conclusione

Per creare un uso della giostra .giostra classe insieme a Data-BS-Ride = "giostra" attribuire, quindi avvolgerlo attorno ai div con le classi .Carousel-indicatori Per aggiungere pulsanti di navigazione, .giostra-interno Per aggiungere immagini di giostra, .carosello-controllo prev Per aggiungere il pulsante di diapositiva precedente, .Carousel-Control-Next aggiungere
Pulsante diapositiva successiva. Nell'articolo di cui sopra il processo di creazione di una giostra è spiegato con esempi per renderti facile capire e creare il tuo carosello.