1 00:00:03,650 --> 00:00:09,125 Acabamos de aprender sobre o componente do carrossel na palestra anterior. 2 00:00:09,125 --> 00:00:14,324 Neste exercício, vamos adicionar um carrossel à nossa 3 00:00:14,324 --> 00:00:20,760 página index.html e, no processo, aprender como o componente carrossel funciona. 4 00:00:20,760 --> 00:00:24,090 Indo para a página index.html, 5 00:00:24,090 --> 00:00:29,640 vamos adicionar em uma nova linha na div conteúdo, 6 00:00:29,640 --> 00:00:31,730 como a primeira linha na div. 7 00:00:31,730 --> 00:00:33,595 Então eu vou entrar e dizer, 8 00:00:33,595 --> 00:00:43,535 dar div classe linha linha conteúdo-linha e dentro desta div, 9 00:00:43,535 --> 00:00:47,545 vamos criar o componente carrossel. 10 00:00:47,545 --> 00:00:56,925 E no que é div eu vou adicionar na coluna interna div, 11 00:00:56,925 --> 00:01:02,045 que irá conter o componente carrossel aqui. 12 00:01:02,045 --> 00:01:04,135 Para adicionar no carrossel, 13 00:01:04,135 --> 00:01:13,630 aqui vou adicionar na div com o ID meu carrossel e 14 00:01:13,630 --> 00:01:17,440 um carrossel de classe e 15 00:01:17,440 --> 00:01:24,170 slide e a classe de passeio de dados. 16 00:01:24,170 --> 00:01:33,110 Então você pode ver o componente JavaScript entrando em ação aqui, 17 00:01:33,110 --> 00:01:42,420 e depois fechar a div e começar a construir o carrossel dentro desta div aqui. 18 00:01:42,420 --> 00:01:44,995 Então, neste carrossel, 19 00:01:44,995 --> 00:01:49,580 adicionaremos o conteúdo do carrossel a seguir. 20 00:01:49,580 --> 00:01:54,700 Então eu vou entrar e, em seguida, adicionar outra div com a classe 21 00:01:56,740 --> 00:02:07,815 carrossel interior e o papel como caixa de listagem. 22 00:02:07,815 --> 00:02:15,380 É assim que construímos o carrossel e fechamos aquela div ali. 23 00:02:15,380 --> 00:02:22,955 E dentro desta div novamente apresentaremos divs que hospedarão 24 00:02:22,955 --> 00:02:32,855 os itens do carrossel aplicando a classe de item de carrossel. 25 00:02:32,855 --> 00:02:37,120 E o primeiro no item do carrossel... 26 00:02:37,240 --> 00:02:41,080 O primeiro na classe de carrossel, 27 00:02:41,080 --> 00:02:42,595 vou aplicar a classe ativa. 28 00:02:42,595 --> 00:02:48,235 Então esta é a primeira div que começa contendo 29 00:02:48,235 --> 00:02:56,650 o slide inicial lá e os restantes, eu vou adicionar em. 30 00:02:56,650 --> 00:03:09,680 Deixe-me adicionar mais duas divs carrossel item 31 00:03:09,680 --> 00:03:16,630 aqui e aplicar apenas o primeiro com a classe ativa. 32 00:03:16,630 --> 00:03:21,445 Agora eu vou introduzir no conteúdo para este carrossel itens. 33 00:03:21,445 --> 00:03:25,165 Então, para construir um item de carrossel, 34 00:03:25,165 --> 00:03:33,770 eu vou entrar lá e, em seguida, incluir uma imagem com a classe d-block. 35 00:03:33,770 --> 00:03:35,655 Então isso é usado para, 36 00:03:35,655 --> 00:03:43,930 esta é uma classe flex que permite que nossa imagem para ser posicionado corretamente e, em seguida, adicionar 37 00:03:43,930 --> 00:03:53,240 na classe fluido imagem e, em seguida, a fonte como img. 38 00:03:58,220 --> 00:04:03,595 Então o que eu vou fazer é mover esse conteúdo 39 00:04:03,595 --> 00:04:09,020 das três linhas de conteúdo abaixo e, em seguida, adicioná-lo no carrossel aqui. 40 00:04:15,470 --> 00:04:21,710 Então eu adiciono uma imagem aqui e, em seguida, ao carrossel, 41 00:04:21,710 --> 00:04:23,340 eu também posso adicionar em 42 00:04:23,340 --> 00:04:28,200 uma div com 43 00:04:28,200 --> 00:04:34,030 a legenda do carrossel da classe. 44 00:04:34,030 --> 00:04:38,780 Aqui podemos incluir algum texto que será retransmitido como uma legenda na imagem. 45 00:04:38,780 --> 00:04:48,450 Então eu vou dizer carrossel legenda d-none, d-md-block. 46 00:04:48,740 --> 00:04:52,555 E, em seguida, dentro aqui, 47 00:04:52,555 --> 00:04:59,490 vou incluir o conteúdo das linhas de conteúdo aqui. 48 00:04:59,490 --> 00:05:04,600 Então eu vou entrar e copiar o conteúdo das linhas de conteúdo 49 00:05:04,600 --> 00:05:14,330 aqui e, em seguida, colar isso no bloco de legendas do carrossel aqui. 50 00:05:25,320 --> 00:05:32,315 E removerei a classe que aplicamos ao H2 deste conteúdo. 51 00:05:32,315 --> 00:05:35,850 Agora, vamos repetir a mesma coisa para os dois restantes copiando 52 00:05:35,850 --> 00:05:40,820 o conteúdo das linhas de conteúdo abaixo aqui. 53 00:05:40,820 --> 00:05:43,645 Então, deixe-me completar isso e então vamos voltar e 54 00:05:43,645 --> 00:05:47,225 dar uma olhada em como o carrossel se parece. 55 00:05:47,225 --> 00:05:49,940 Aqui você pode ver que eu completei 56 00:05:49,940 --> 00:05:56,440 os itens de carrossel restantes aqui copiando o conteúdo das linhas de conteúdo abaixo. 57 00:05:56,440 --> 00:06:04,190 Vamos adicionar algumas classes CSS para que o carrossel seja bem estruturado. 58 00:06:04,190 --> 00:06:10,235 Então, indo para o arquivo styles.css na parte inferior aqui, 59 00:06:10,235 --> 00:06:17,410 eu vou adicionar em um par de mais classes aqui. 60 00:06:17,410 --> 00:06:19,710 Para a classe carrossel, 61 00:06:19,710 --> 00:06:25,310 eu adicionaria o fundo como 512DA8, 62 00:06:25,310 --> 00:06:30,280 que temos usado antes da classe de cor escura. 63 00:06:30,280 --> 00:06:39,825 E, em seguida, para a classe de item carrossel, 64 00:06:39,825 --> 00:06:47,400 eu vou adicionar em uma altura como 300 pixels. 65 00:06:48,030 --> 00:06:59,195 E para a imagem que está incluída dentro do item de carrossel, 66 00:06:59,195 --> 00:07:03,480 eu vou aplicar algumas transformações aqui. 67 00:07:03,480 --> 00:07:10,830 Eu diria, posição absoluta. 68 00:07:10,830 --> 00:07:14,360 Quero posicioná-lo para a esquerda. 69 00:07:19,470 --> 00:07:29,290 Assim, este zero superior e esquerdo posicionará esta imagem na borda superior esquerda 70 00:07:29,290 --> 00:07:33,700 da caixa de carrossel lá e com 71 00:07:33,700 --> 00:07:41,050 uma altura mínima definida para 300 pixels para corresponder à altura dos itens do carrossel. 72 00:07:41,050 --> 00:07:45,680 Portanto, esta imagem irá essencialmente esticar toda 73 00:07:45,680 --> 00:07:51,020 a altura do carrossel, mas será posicionada na borda esquerda da caixa de carrossel aqui. 74 00:07:51,020 --> 00:07:52,820 Então deixe-me salvar as alterações. 75 00:07:52,820 --> 00:07:58,235 Vamos dar uma olhada em como esse carrossel se parece em nossa página da web. 76 00:07:58,235 --> 00:07:59,770 Indo para a página da web, 77 00:07:59,770 --> 00:08:05,460 agora você pode ver esse carrossel em ação em nossa página de tabela de estudo de índice. 78 00:08:05,460 --> 00:08:09,000 Então você pode ver que o carrossel está 79 00:08:09,000 --> 00:08:13,905 posicionado no topo aqui e então vamos continuar rolando em intervalos regulares. 80 00:08:13,905 --> 00:08:16,470 Observe como usando as classes CSS, 81 00:08:16,470 --> 00:08:21,925 eu defini o plano de fundo do carrossel de tal forma que as legendas são 82 00:08:21,925 --> 00:08:24,745 claramente visíveis no carrossel 83 00:08:24,745 --> 00:08:28,305 e também como a imagem foi posicionada no carrossel. 84 00:08:28,305 --> 00:08:33,865 A altura deste slide de carrossel é fixada em 300 pixels. 85 00:08:33,865 --> 00:08:37,750 Então, isso dá um layout limpo agradável para este carrossel. 86 00:08:37,750 --> 00:08:42,855 Agora, vamos adicionar alguns controles para este carrossel. 87 00:08:42,855 --> 00:08:46,155 Voltando para index.html. 88 00:08:46,155 --> 00:08:56,015 Logo após o carrossel em nossa caixa aqui, mas ainda dentro do carrossel, 89 00:08:56,015 --> 00:09:05,170 eu vou adicionar em um OL para introduzir alguns controles manuais para o carrossel. 90 00:09:05,170 --> 00:09:10,490 E com os indicadores de carrossel da classe. 91 00:09:12,400 --> 00:09:16,570 Esses indicadores serão posicionados nos 92 00:09:16,570 --> 00:09:24,095 slides do carrossel para indicar qual slide específico está sendo exibido no momento. 93 00:09:24,095 --> 00:09:28,760 Então deixe-me introduzir no conteúdo aqui então eu digo OL, 94 00:09:28,760 --> 00:09:30,630 Eu uso o OL para isso. 95 00:09:30,630 --> 00:09:34,175 E então, lá dentro eu uso a lista com 96 00:09:34,175 --> 00:09:42,175 o alvo de dados definido para o meu carrossel. 97 00:09:42,175 --> 00:09:49,460 Então este é o ID do carrossel e dados deslizando-to. 98 00:09:49,460 --> 00:09:55,880 E os primeiros indicadores deslizarão para o slide número zero. 99 00:09:56,870 --> 00:10:08,080 Com essa classe como ativo para o primeiro item nesta lista, em 100 00:10:08,460 --> 00:10:18,870 seguida, os dois itens restantes eu vou simplesmente usar lista com o data-target 101 00:10:18,870 --> 00:10:24,510 definido igual ao meu carrossel 102 00:10:24,510 --> 00:10:30,310 e o data-slide-to é definido como um. 103 00:10:30,310 --> 00:10:33,150 Então, isso é para o segundo slide lá. 104 00:10:33,150 --> 00:10:38,755 Eu só vou copiar este aqui e então criar o terceiro indicador indicador aqui. 105 00:10:38,755 --> 00:10:47,740 Então vamos entrar e copiar isso e, em seguida, mudar isso para slide de dados para dois. 106 00:10:47,740 --> 00:10:54,685 Então, temos slides livres em nosso carrossel para que três indicadores sejam suficientes. 107 00:10:54,685 --> 00:10:58,540 Agora, também adicionaremos alguns controles a 108 00:10:58,540 --> 00:11:02,435 este carrossel que nos permite rolar manualmente o carrossel. 109 00:11:02,435 --> 00:11:06,580 Para fazer isso, vou introduzir um 110 00:11:06,580 --> 00:11:13,705 A com a classe carrossel control-prev aqui. 111 00:11:13,705 --> 00:11:17,065 Então isso me permitiria ir para o slide anterior, 112 00:11:17,065 --> 00:11:22,710 fazer o href igual a mycarrossel, para que 113 00:11:22,710 --> 00:11:30,220 você possa ver que estamos tentando mirar o carrossel lá e o papel é um botão. 114 00:11:30,220 --> 00:11:38,730 Então isso vai atuar como um botão e slide de dados como anterior. 115 00:11:38,730 --> 00:11:41,620 Então, dentro deste A, 116 00:11:44,530 --> 00:11:52,635 vou introduzir um ícone 117 00:11:52,635 --> 00:11:55,810 para representar este controle na tela. 118 00:11:55,810 --> 00:12:01,310 Então, eu vou dizer, span classe carrossel-control-prev-icon 119 00:12:01,960 --> 00:12:12,560 e fechar o span aqui. 120 00:12:12,560 --> 00:12:18,210 Agora vou copiar este controle. 121 00:12:19,890 --> 00:12:28,950 E colá-lo aqui e, em seguida, criar o controle para o próximo slide aqui então eu diria, 122 00:12:28,950 --> 00:12:34,440 carrossel control-next and roll é um botão eo slide de dados usado para 123 00:12:34,440 --> 00:12:41,315 o próximo eo ícone seria carrossel control-next icon. 124 00:12:41,315 --> 00:12:45,275 Então, adicionando isso no meu carrossel, 125 00:12:45,275 --> 00:12:49,595 vamos dar uma olhada no nosso carrossel neste momento. 126 00:12:49,595 --> 00:12:51,395 Indo para o carrossel, 127 00:12:51,395 --> 00:12:57,325 agora você pode ver que no meu carrossel eu tenho três botões indicadores aqui, 128 00:12:57,325 --> 00:13:02,830 que indicam qual slide particular está 129 00:13:02,830 --> 00:13:08,085 atualmente visível no meu carrossel e como os slides deslizam, 130 00:13:08,085 --> 00:13:11,380 então o indicador também muda de forma correspondente para 131 00:13:11,380 --> 00:13:15,150 indicar qual slide particular é visível. 132 00:13:15,150 --> 00:13:21,810 Posso clicar manualmente em um deles e ir para o slide específico no carrossel. 133 00:13:21,810 --> 00:13:26,320 Não só isso, você pode ver que agora existem dois indicadores, 134 00:13:26,320 --> 00:13:27,980 a esquerda e a direita, 135 00:13:27,980 --> 00:13:32,120 que eu posso usar para rolar novamente pelo carrossel 136 00:13:32,120 --> 00:13:36,715 clicando nesses indicadores aqui. 137 00:13:36,715 --> 00:13:38,490 Então, usando esses controles, 138 00:13:38,490 --> 00:13:43,660 tanto o controle anterior quanto o próximo e os indicadores aqui, 139 00:13:43,660 --> 00:13:51,155 eu posso navegar para o slide específico no meu carrossel. 140 00:13:51,155 --> 00:13:53,635 Isso completa este exercício. 141 00:13:53,635 --> 00:13:59,350 Este é um bom momento para você fazer um git-commit com o carrossel de mensagem.