1 00:00:03,650 --> 00:00:09,125 Abbiamo appena imparato a conoscere la componente carosello nella lezione precedente. 2 00:00:09,125 --> 00:00:14,324 In questo esercizio, aggiungeremo un carosello alla nostra 3 00:00:14,324 --> 00:00:20,760 pagina index.html e nel processo impareremo come funziona il componente carosello. 4 00:00:20,760 --> 00:00:24,090 Andando alla pagina index.html, 5 00:00:24,090 --> 00:00:29,640 aggiungeremo in una nuova riga nel div contenuto, 6 00:00:29,640 --> 00:00:31,730 come la prima riga nel div. 7 00:00:31,730 --> 00:00:33,595 Quindi entrerò e dirò, 8 00:00:33,595 --> 00:00:43,535 dare la riga di classe div contenuto e all'interno di questo div, 9 00:00:43,535 --> 00:00:47,545 creeremo il componente carosello. 10 00:00:47,545 --> 00:00:56,925 E in cosa div aggiungerò nella colonna interna div, 11 00:00:56,925 --> 00:01:02,045 che conterrà qui il componente carosello. 12 00:01:02,045 --> 00:01:04,135 Per aggiungere il carosello, 13 00:01:04,135 --> 00:01:13,630 qui aggiungerò il div con l'ID il mio carosello e 14 00:01:13,630 --> 00:01:17,440 un carosello di classe e 15 00:01:17,440 --> 00:01:24,170 diapositiva e la classe di corsa dei dati. 16 00:01:24,170 --> 00:01:33,110 Quindi puoi vedere il componente JavaScript entrare in azione qui, 17 00:01:33,110 --> 00:01:42,420 quindi chiudere il div e iniziare a costruire il carosello all'interno di questo div qui. 18 00:01:42,420 --> 00:01:44,995 Quindi, in questo carosello, 19 00:01:44,995 --> 00:01:49,580 aggiungeremo il contenuto del carosello successivo. 20 00:01:49,580 --> 00:01:54,700 Quindi entrerò e poi aggiungo un altro div con la classe 21 00:01:56,740 --> 00:02:07,815 giostra-inner e il ruolo come casella di riepilogo. 22 00:02:07,815 --> 00:02:15,380 Questo è il modo in cui costruiamo la giostra e poi chiudiamo quel div lì. 23 00:02:15,380 --> 00:02:22,955 E all'interno di questo div di nuovo introdurremo div che ospiteranno 24 00:02:22,955 --> 00:02:32,855 gli elementi del carosello applicando la classe elemento carosello. 25 00:02:32,855 --> 00:02:37,120 E il primo nella giostra... 26 00:02:37,240 --> 00:02:41,080 Il primo nella classe carosello, 27 00:02:41,080 --> 00:02:42,595 applicherò la classe attiva. 28 00:02:42,595 --> 00:02:48,235 Quindi questo è il primo div che inizia contenente 29 00:02:48,235 --> 00:02:56,650 la diapositiva iniziale lì e quelli rimanenti, ho intenzione di aggiungere. 30 00:02:56,650 --> 00:03:09,680 Permettetemi di aggiungere altri due div di carosello 31 00:03:09,680 --> 00:03:16,630 qui e applicare solo il primo con la classe attiva. 32 00:03:16,630 --> 00:03:21,445 Ora ho intenzione di introdurre nel contenuto in questo carosello elementi. 33 00:03:21,445 --> 00:03:25,165 Quindi, per costruire un elemento di carosello, 34 00:03:25,165 --> 00:03:33,770 andrò lì e poi includerò un'immagine con il blocco d di classe. 35 00:03:33,770 --> 00:03:35,655 Quindi questo è usato per, 36 00:03:35,655 --> 00:03:43,930 questa è una classe flex che consente alla nostra immagine di essere posizionata correttamente e quindi aggiungere 37 00:03:43,930 --> 00:03:53,240 nella classe image fluid e quindi la sorgente come img. 38 00:03:58,220 --> 00:04:03,595 Quindi quello che farò è spostare quel contenuto 39 00:04:03,595 --> 00:04:09,020 dalle tre righe di contenuto sottostanti e quindi aggiungerlo nella giostra qui. 40 00:04:15,470 --> 00:04:21,710 Quindi aggiungo un'immagine qui e poi al carosello, 41 00:04:21,710 --> 00:04:23,340 posso anche aggiungere in 42 00:04:23,340 --> 00:04:28,200 un div con 43 00:04:28,200 --> 00:04:34,030 la didascalia della giostra di classe. 44 00:04:34,030 --> 00:04:38,780 Qui possiamo includere del testo che verrà inoltrato come didascalia sull'immagine. 45 00:04:38,780 --> 00:04:48,450 Quindi dirò didascalia carosello d-none, d-md-block. 46 00:04:48,740 --> 00:04:52,555 E poi dentro qui, 47 00:04:52,555 --> 00:04:59,490 includerò il contenuto dalle righe del contenuto qui. 48 00:04:59,490 --> 00:05:04,600 Quindi entrerò e copierò il contenuto dalle righe di contenuto 49 00:05:04,600 --> 00:05:14,330 qui e poi incollerò nel blocco didascalia carosello qui. 50 00:05:25,320 --> 00:05:32,315 E rimuoverò la classe che abbiamo applicato a H2 da questo contenuto. 51 00:05:32,315 --> 00:05:35,850 Ora, ripeteremo la stessa cosa per i restanti due copiando 52 00:05:35,850 --> 00:05:40,820 il contenuto dalle righe di contenuto qui sotto. 53 00:05:40,820 --> 00:05:43,645 Quindi, lasciami completare questo e poi torneremo 54 00:05:43,645 --> 00:05:47,225 a dare un'occhiata a come appare la giostra. 55 00:05:47,225 --> 00:05:49,940 Qui puoi vedere che ho completato 56 00:05:49,940 --> 00:05:56,440 gli elementi di carosello rimanenti qui copiando il contenuto dalle righe di contenuto qui sotto. 57 00:05:56,440 --> 00:06:04,190 Aggiungiamo alcune classi CSS in modo che il carosello sia ben strutturato. 58 00:06:04,190 --> 00:06:10,235 Quindi andando al file styles.css in basso qui, 59 00:06:10,235 --> 00:06:17,410 ho intenzione di aggiungere un paio di altre classi qui. 60 00:06:17,410 --> 00:06:19,710 Per la classe carosello, 61 00:06:19,710 --> 00:06:25,310 aggiungerei lo sfondo come 512DA8, 62 00:06:25,310 --> 00:06:30,280 che abbiamo usato prima della classe di colore scuro. 63 00:06:30,280 --> 00:06:39,825 E poi per la classe carosello, 64 00:06:39,825 --> 00:06:47,400 aggiungerò un'altezza di 300 pixel. 65 00:06:48,030 --> 00:06:59,195 E per l'immagine che è inclusa all'interno dell'elemento carosello, 66 00:06:59,195 --> 00:07:03,480 ho intenzione di applicare alcune trasformazioni qui. 67 00:07:03,480 --> 00:07:10,830 Direi, posizione assoluta. 68 00:07:10,830 --> 00:07:14,360 Voglio posizionarlo a sinistra. 69 00:07:19,470 --> 00:07:29,290 Quindi questo zero superiore e sinistro posizionerà questa immagine sul bordo superiore sinistro della 70 00:07:29,290 --> 00:07:33,700 scatola della giostra lì e con 71 00:07:33,700 --> 00:07:41,050 un'altezza minima impostata su 300 pixel per corrispondere all'altezza degli elementi carosello. 72 00:07:41,050 --> 00:07:45,680 Quindi questa immagine estenderà essenzialmente l'intera altezza 73 00:07:45,680 --> 00:07:51,020 del carosello, ma sarà posizionata sul bordo sinistro della scatola del carosello qui. 74 00:07:51,020 --> 00:07:52,820 Quindi lasciami salvare le modifiche. 75 00:07:52,820 --> 00:07:58,235 Andremo a dare un'occhiata a come appare questa giostra sulla nostra pagina web. 76 00:07:58,235 --> 00:07:59,770 Andando alla pagina web, 77 00:07:59,770 --> 00:08:05,460 è ora possibile vedere che carosello in azione sulla nostra pagina tabella di studio indice. 78 00:08:05,460 --> 00:08:09,000 Così si può vedere che il carosello è 79 00:08:09,000 --> 00:08:13,905 posizionato in alto qui e poi continueremo a scorrere a intervalli regolari. 80 00:08:13,905 --> 00:08:16,470 Nota come usando le classi CSS, 81 00:08:16,470 --> 00:08:21,925 ho disegnato lo sfondo dal carosello in modo che le didascalie siano 82 00:08:21,925 --> 00:08:24,745 chiaramente visibili nel carosello 83 00:08:24,745 --> 00:08:28,305 e anche come l'immagine è stata posizionata sul carosello. 84 00:08:28,305 --> 00:08:33,865 L' altezza di questa diapositiva carosello è fissata a 300 pixel. 85 00:08:33,865 --> 00:08:37,750 Quindi, questo dà un bel layout pulito per questo carosello. 86 00:08:37,750 --> 00:08:42,855 Ora, aggiungiamo alcuni controlli per questo carosello. 87 00:08:42,855 --> 00:08:46,155 Tornare a index.html. 88 00:08:46,155 --> 00:08:56,015 Subito dopo il carosello nella nostra scatola qui, ma ancora all'interno del carosello, 89 00:08:56,015 --> 00:09:05,170 ho intenzione di aggiungere in un OL per introdurre alcuni controlli manuali per la giostra. 90 00:09:05,170 --> 00:09:10,490 E con gli indicatori della giostra di classe. 91 00:09:12,400 --> 00:09:16,570 Questi indicatori saranno posizionati 92 00:09:16,570 --> 00:09:24,095 sulle diapositive carosello per indicare quale particolare diapositiva è attualmente mostrata. 93 00:09:24,095 --> 00:09:28,760 Quindi lasciami introdurre nel contenuto qui, quindi dico OL, 94 00:09:28,760 --> 00:09:30,630 uso l'OL per questo. 95 00:09:30,630 --> 00:09:34,175 E poi, dentro lì uso la lista con 96 00:09:34,175 --> 00:09:42,175 il target dati impostato sul mio carosello. 97 00:09:42,175 --> 00:09:49,460 Quindi questo è l'ID del carosello e dei dati slide-to. 98 00:09:49,460 --> 00:09:55,880 E i primi indicatori scivoleranno fino alla diapositiva numero zero. 99 00:09:56,870 --> 00:10:08,080 Con quella classe come attiva per il primo elemento in questo elenco, 100 00:10:08,460 --> 00:10:18,870 quindi i restanti due elementi userò semplicemente la lista con il target di dati 101 00:10:18,870 --> 00:10:24,510 impostato uguale al mio carosello 102 00:10:24,510 --> 00:10:30,310 e il data-slide-to è impostato su uno. 103 00:10:30,310 --> 00:10:33,150 Quindi, questo è per la seconda diapositiva lì. 104 00:10:33,150 --> 00:10:38,755 Ho intenzione di copiare questo e poi creare il terzo indicatore qui dentro. 105 00:10:38,755 --> 00:10:47,740 Quindi entreremo e copieremo questo e poi cambieremo questo in data-slide-to two. 106 00:10:47,740 --> 00:10:54,685 Quindi abbiamo diapositive libere nella nostra giostra, quindi tre indicatori sono sufficienti. 107 00:10:54,685 --> 00:10:58,540 Ora, aggiungeremo anche un paio di controlli a 108 00:10:58,540 --> 00:11:02,435 questo carosello che ci permette di scorrere manualmente il carosello. 109 00:11:02,435 --> 00:11:06,580 Per fare ciò, introdurrò un A con 110 00:11:06,580 --> 00:11:13,705 la classe carosello controllo-prev qui. 111 00:11:13,705 --> 00:11:17,065 Quindi questo mi permetterebbe di andare alla diapositiva precedente, 112 00:11:17,065 --> 00:11:22,710 rendere l'href uguale a mycarosel, in 113 00:11:22,710 --> 00:11:30,220 modo da poter vedere che stiamo cercando di indirizzare la giostra lì e il ruolo è un pulsante. 114 00:11:30,220 --> 00:11:38,730 Quindi questo funzionerà come un pulsante e una diapositiva di dati come precedente. 115 00:11:38,730 --> 00:11:41,620 Quindi all'interno di questo A, 116 00:11:44,530 --> 00:11:52,635 introdurrò un'icona 117 00:11:52,635 --> 00:11:55,810 per rappresentare questo controllo sullo schermo. 118 00:11:55,810 --> 00:12:01,310 Quindi, dirò, span classe carosello controllo-prev-icon 119 00:12:01,960 --> 00:12:12,560 e chiudi lo span qui. 120 00:12:12,560 --> 00:12:18,210 Copierò questo controllo. 121 00:12:19,890 --> 00:12:28,950 E incollalo qui e poi crea il controllo per la diapositiva successiva qui così direi, 122 00:12:28,950 --> 00:12:34,440 giostra-control-next e roll è un pulsante e la diapositiva di dati utilizzata per 123 00:12:34,440 --> 00:12:41,315 il prossimo e l'icona sarebbe giostra-controllo-icona successiva. 124 00:12:41,315 --> 00:12:45,275 Quindi aggiungendo questi nel mio carosello, 125 00:12:45,275 --> 00:12:49,595 andiamo a dare un'occhiata al nostro carosello in questo momento. 126 00:12:49,595 --> 00:12:51,395 Andando al carosello, 127 00:12:51,395 --> 00:12:57,325 ora puoi vedere che nel mio carosello ho tre pulsanti indicatori qui, 128 00:12:57,325 --> 00:13:02,830 che indicano quale particolare diapositiva è 129 00:13:02,830 --> 00:13:08,085 attualmente visibile nel mio carosello e mentre le diapositive scorrono, 130 00:13:08,085 --> 00:13:11,380 quindi l'indicatore cambia di conseguenza per 131 00:13:11,380 --> 00:13:15,150 indicare quale particolare diapositiva è visibile. 132 00:13:15,150 --> 00:13:21,810 Posso fare clic manualmente su uno di essi e andare alla diapositiva specifica nel carosello. 133 00:13:21,810 --> 00:13:26,320 Non solo, puoi vedere che ora ci sono due indicatori, 134 00:13:26,320 --> 00:13:27,980 la sinistra e la destra, 135 00:13:27,980 --> 00:13:32,120 che posso usare per scorrere nuovamente la giostra 136 00:13:32,120 --> 00:13:36,715 facendo clic su questi indicatori qui. 137 00:13:36,715 --> 00:13:38,490 Quindi, usando questi controlli, 138 00:13:38,490 --> 00:13:43,660 sia il controllo precedente che quello successivo e gli indicatori qui, 139 00:13:43,660 --> 00:13:51,155 posso passare alla diapositiva specifica nel mio carosello. 140 00:13:51,155 --> 00:13:53,635 Questo completa questo esercizio. 141 00:13:53,635 --> 00:13:59,350 Questo è un buon momento per fare un git-commit con la giostra dei messaggi.