Abbiamo appena imparato a conoscere la componente carosello nella lezione precedente.
In questo esercizio, aggiungeremo un carosello alla nostra
pagina index.html e nel processo impareremo come funziona il componente carosello.
Andando alla pagina index.html,
aggiungeremo in una nuova riga nel div contenuto,
come la prima riga nel div.
Quindi entrerò e dirò,
dare la riga di classe div contenuto e all'interno di questo div,
creeremo il componente carosello.
E in cosa div aggiungerò nella colonna interna div,
che conterrà qui il componente carosello.
Per aggiungere il carosello,
qui aggiungerò il div con l'ID il mio carosello e
un carosello di classe e
diapositiva e la classe di corsa dei dati.
Quindi puoi vedere il componente JavaScript entrare in azione qui,
quindi chiudere il div e iniziare a costruire il carosello all'interno di questo div qui.
Quindi, in questo carosello,
aggiungeremo il contenuto del carosello successivo.
Quindi entrerò e poi aggiungo un altro div con la classe
giostra-inner e il ruolo come casella di riepilogo.
Questo è il modo in cui costruiamo la giostra e poi chiudiamo quel div lì.
E all'interno di questo div di nuovo introdurremo div che ospiteranno
gli elementi del carosello applicando la classe elemento carosello.
E il primo nella giostra...
Il primo nella classe carosello,
applicherò la classe attiva.
Quindi questo è il primo div che inizia contenente
la diapositiva iniziale lì e quelli rimanenti, ho intenzione di aggiungere.
Permettetemi di aggiungere altri due div di carosello
qui e applicare solo il primo con la classe attiva.
Ora ho intenzione di introdurre nel contenuto in questo carosello elementi.
Quindi, per costruire un elemento di carosello,
andrò lì e poi includerò un'immagine con il blocco d di classe.
Quindi questo è usato per,
questa è una classe flex che consente alla nostra immagine di essere posizionata correttamente e quindi aggiungere
nella classe image fluid e quindi la sorgente come img.
Quindi quello che farò è spostare quel contenuto
dalle tre righe di contenuto sottostanti e quindi aggiungerlo nella giostra qui.
Quindi aggiungo un'immagine qui e poi al carosello,
posso anche aggiungere in
un div con
la didascalia della giostra di classe.
Qui possiamo includere del testo che verrà inoltrato come didascalia sull'immagine.
Quindi dirò didascalia carosello d-none, d-md-block.
E poi dentro qui,
includerò il contenuto dalle righe del contenuto qui.
Quindi entrerò e copierò il contenuto dalle righe di contenuto
qui e poi incollerò nel blocco didascalia carosello qui.
E rimuoverò la classe che abbiamo applicato a H2 da questo contenuto.
Ora, ripeteremo la stessa cosa per i restanti due copiando
il contenuto dalle righe di contenuto qui sotto.
Quindi, lasciami completare questo e poi torneremo
a dare un'occhiata a come appare la giostra.
Qui puoi vedere che ho completato
gli elementi di carosello rimanenti qui copiando il contenuto dalle righe di contenuto qui sotto.
Aggiungiamo alcune classi CSS in modo che il carosello sia ben strutturato.
Quindi andando al file styles.css in basso qui,
ho intenzione di aggiungere un paio di altre classi qui.
Per la classe carosello,
aggiungerei lo sfondo come 512DA8,
che abbiamo usato prima della classe di colore scuro.
E poi per la classe carosello,
aggiungerò un'altezza di 300 pixel.
E per l'immagine che è inclusa all'interno dell'elemento carosello,
ho intenzione di applicare alcune trasformazioni qui.
Direi, posizione assoluta.
Voglio posizionarlo a sinistra.
Quindi questo zero superiore e sinistro posizionerà questa immagine sul bordo superiore sinistro della
scatola della giostra lì e con
un'altezza minima impostata su 300 pixel per corrispondere all'altezza degli elementi carosello.
Quindi questa immagine estenderà essenzialmente l'intera altezza
del carosello, ma sarà posizionata sul bordo sinistro della scatola del carosello qui.
Quindi lasciami salvare le modifiche.
Andremo a dare un'occhiata a come appare questa giostra sulla nostra pagina web.
Andando alla pagina web,
è ora possibile vedere che carosello in azione sulla nostra pagina tabella di studio indice.
Così si può vedere che il carosello è
posizionato in alto qui e poi continueremo a scorrere a intervalli regolari.
Nota come usando le classi CSS,
ho disegnato lo sfondo dal carosello in modo che le didascalie siano
chiaramente visibili nel carosello
e anche come l'immagine è stata posizionata sul carosello.
L' altezza di questa diapositiva carosello è fissata a 300 pixel.
Quindi, questo dà un bel layout pulito per questo carosello.
Ora, aggiungiamo alcuni controlli per questo carosello.
Tornare a index.html.
Subito dopo il carosello nella nostra scatola qui, ma ancora all'interno del carosello,
ho intenzione di aggiungere in un OL per introdurre alcuni controlli manuali per la giostra.
E con gli indicatori della giostra di classe.
Questi indicatori saranno posizionati
sulle diapositive carosello per indicare quale particolare diapositiva è attualmente mostrata.
Quindi lasciami introdurre nel contenuto qui, quindi dico OL,
uso l'OL per questo.
E poi, dentro lì uso la lista con
il target dati impostato sul mio carosello.
Quindi questo è l'ID del carosello e dei dati slide-to.
E i primi indicatori scivoleranno fino alla diapositiva numero zero.
Con quella classe come attiva per il primo elemento in questo elenco,
quindi i restanti due elementi userò semplicemente la lista con il target di dati
impostato uguale al mio carosello
e il data-slide-to è impostato su uno.
Quindi, questo è per la seconda diapositiva lì.
Ho intenzione di copiare questo e poi creare il terzo indicatore qui dentro.
Quindi entreremo e copieremo questo e poi cambieremo questo in data-slide-to two.
Quindi abbiamo diapositive libere nella nostra giostra, quindi tre indicatori sono sufficienti.
Ora, aggiungeremo anche un paio di controlli a
questo carosello che ci permette di scorrere manualmente il carosello.
Per fare ciò, introdurrò un A con
la classe carosello controllo-prev qui.
Quindi questo mi permetterebbe di andare alla diapositiva precedente,
rendere l'href uguale a mycarosel, in
modo da poter vedere che stiamo cercando di indirizzare la giostra lì e il ruolo è un pulsante.
Quindi questo funzionerà come un pulsante e una diapositiva di dati come precedente.
Quindi all'interno di questo A,
introdurrò un'icona
per rappresentare questo controllo sullo schermo.
Quindi, dirò, span classe carosello controllo-prev-icon
e chiudi lo span qui.
Copierò questo controllo.
E incollalo qui e poi crea il controllo per la diapositiva successiva qui così direi,
giostra-control-next e roll è un pulsante e la diapositiva di dati utilizzata per
il prossimo e l'icona sarebbe giostra-controllo-icona successiva.
Quindi aggiungendo questi nel mio carosello,
andiamo a dare un'occhiata al nostro carosello in questo momento.
Andando al carosello,
ora puoi vedere che nel mio carosello ho tre pulsanti indicatori qui,
che indicano quale particolare diapositiva è
attualmente visibile nel mio carosello e mentre le diapositive scorrono,
quindi l'indicatore cambia di conseguenza per
indicare quale particolare diapositiva è visibile.
Posso fare clic manualmente su uno di essi e andare alla diapositiva specifica nel carosello.
Non solo, puoi vedere che ora ci sono due indicatori,
la sinistra e la destra,
che posso usare per scorrere nuovamente la giostra
facendo clic su questi indicatori qui.
Quindi, usando questi controlli,
sia il controllo precedente che quello successivo e gli indicatori qui,
posso passare alla diapositiva specifica nel mio carosello.
Questo completa questo esercizio.
Questo è un buon momento per fare un git-commit con la giostra dei messaggi.