Acabamos de aprender sobre o componente do carrossel na palestra anterior.
Neste exercício, vamos adicionar um carrossel à nossa
página index.html e, no processo, aprender como o componente carrossel funciona.
Indo para a página index.html,
vamos adicionar em uma nova linha na div conteúdo,
como a primeira linha na div.
Então eu vou entrar e dizer,
dar div classe linha linha conteúdo-linha e dentro desta div,
vamos criar o componente carrossel.
E no que é div eu vou adicionar na coluna interna div,
que irá conter o componente carrossel aqui.
Para adicionar no carrossel,
aqui vou adicionar na div com o ID meu carrossel e
um carrossel de classe e
slide e a classe de passeio de dados.
Então você pode ver o componente JavaScript entrando em ação aqui,
e depois fechar a div e começar a construir o carrossel dentro desta div aqui.
Então, neste carrossel,
adicionaremos o conteúdo do carrossel a seguir.
Então eu vou entrar e, em seguida, adicionar outra div com a classe
carrossel interior e o papel como caixa de listagem.
É assim que construímos o carrossel e fechamos aquela div ali.
E dentro desta div novamente apresentaremos divs que hospedarão
os itens do carrossel aplicando a classe de item de carrossel.
E o primeiro no item do carrossel...
O primeiro na classe de carrossel,
vou aplicar a classe ativa.
Então esta é a primeira div que começa contendo
o slide inicial lá e os restantes, eu vou adicionar em.
Deixe-me adicionar mais duas divs carrossel item
aqui e aplicar apenas o primeiro com a classe ativa.
Agora eu vou introduzir no conteúdo para este carrossel itens.
Então, para construir um item de carrossel,
eu vou entrar lá e, em seguida, incluir uma imagem com a classe d-block.
Então isso é usado para,
esta é uma classe flex que permite que nossa imagem para ser posicionado corretamente e, em seguida, adicionar
na classe fluido imagem e, em seguida, a fonte como img.
Então o que eu vou fazer é mover esse conteúdo
das três linhas de conteúdo abaixo e, em seguida, adicioná-lo no carrossel aqui.
Então eu adiciono uma imagem aqui e, em seguida, ao carrossel,
eu também posso adicionar em
uma div com
a legenda do carrossel da classe.
Aqui podemos incluir algum texto que será retransmitido como uma legenda na imagem.
Então eu vou dizer carrossel legenda d-none, d-md-block.
E, em seguida, dentro aqui,
vou incluir o conteúdo das linhas de conteúdo aqui.
Então eu vou entrar e copiar o conteúdo das linhas de conteúdo
aqui e, em seguida, colar isso no bloco de legendas do carrossel aqui.
E removerei a classe que aplicamos ao H2 deste conteúdo.
Agora, vamos repetir a mesma coisa para os dois restantes copiando
o conteúdo das linhas de conteúdo abaixo aqui.
Então, deixe-me completar isso e então vamos voltar e
dar uma olhada em como o carrossel se parece.
Aqui você pode ver que eu completei
os itens de carrossel restantes aqui copiando o conteúdo das linhas de conteúdo abaixo.
Vamos adicionar algumas classes CSS para que o carrossel seja bem estruturado.
Então, indo para o arquivo styles.css na parte inferior aqui,
eu vou adicionar em um par de mais classes aqui.
Para a classe carrossel,
eu adicionaria o fundo como 512DA8,
que temos usado antes da classe de cor escura.
E, em seguida, para a classe de item carrossel,
eu vou adicionar em uma altura como 300 pixels.
E para a imagem que está incluída dentro do item de carrossel,
eu vou aplicar algumas transformações aqui.
Eu diria, posição absoluta.
Quero posicioná-lo para a esquerda.
Assim, este zero superior e esquerdo posicionará esta imagem na borda superior esquerda
da caixa de carrossel lá e com
uma altura mínima definida para 300 pixels para corresponder à altura dos itens do carrossel.
Portanto, esta imagem irá essencialmente esticar toda
a altura do carrossel, mas será posicionada na borda esquerda da caixa de carrossel aqui.
Então deixe-me salvar as alterações.
Vamos dar uma olhada em como esse carrossel se parece em nossa página da web.
Indo para a página da web,
agora você pode ver esse carrossel em ação em nossa página de tabela de estudo de índice.
Então você pode ver que o carrossel está
posicionado no topo aqui e então vamos continuar rolando em intervalos regulares.
Observe como usando as classes CSS,
eu defini o plano de fundo do carrossel de tal forma que as legendas são
claramente visíveis no carrossel
e também como a imagem foi posicionada no carrossel.
A altura deste slide de carrossel é fixada em 300 pixels.
Então, isso dá um layout limpo agradável para este carrossel.
Agora, vamos adicionar alguns controles para este carrossel.
Voltando para index.html.
Logo após o carrossel em nossa caixa aqui, mas ainda dentro do carrossel,
eu vou adicionar em um OL para introduzir alguns controles manuais para o carrossel.
E com os indicadores de carrossel da classe.
Esses indicadores serão posicionados nos
slides do carrossel para indicar qual slide específico está sendo exibido no momento.
Então deixe-me introduzir no conteúdo aqui então eu digo OL,
Eu uso o OL para isso.
E então, lá dentro eu uso a lista com
o alvo de dados definido para o meu carrossel.
Então este é o ID do carrossel e dados deslizando-to.
E os primeiros indicadores deslizarão para o slide número zero.
Com essa classe como ativo para o primeiro item nesta lista, em
seguida, os dois itens restantes eu vou simplesmente usar lista com o data-target
definido igual ao meu carrossel
e o data-slide-to é definido como um.
Então, isso é para o segundo slide lá.
Eu só vou copiar este aqui e então criar o terceiro indicador indicador aqui.
Então vamos entrar e copiar isso e, em seguida, mudar isso para slide de dados para dois.
Então, temos slides livres em nosso carrossel para que três indicadores sejam suficientes.
Agora, também adicionaremos alguns controles a
este carrossel que nos permite rolar manualmente o carrossel.
Para fazer isso, vou introduzir um
A com a classe carrossel control-prev aqui.
Então isso me permitiria ir para o slide anterior,
fazer o href igual a mycarrossel, para que
você possa ver que estamos tentando mirar o carrossel lá e o papel é um botão.
Então isso vai atuar como um botão e slide de dados como anterior.
Então, dentro deste A,
vou introduzir um ícone
para representar este controle na tela.
Então, eu vou dizer, span classe carrossel-control-prev-icon
e fechar o span aqui.
Agora vou copiar este controle.
E colá-lo aqui e, em seguida, criar o controle para o próximo slide aqui então eu diria,
carrossel control-next and roll é um botão eo slide de dados usado para
o próximo eo ícone seria carrossel control-next icon.
Então, adicionando isso no meu carrossel,
vamos dar uma olhada no nosso carrossel neste momento.
Indo para o carrossel,
agora você pode ver que no meu carrossel eu tenho três botões indicadores aqui,
que indicam qual slide particular está
atualmente visível no meu carrossel e como os slides deslizam,
então o indicador também muda de forma correspondente para
indicar qual slide particular é visível.
Posso clicar manualmente em um deles e ir para o slide específico no carrossel.
Não só isso, você pode ver que agora existem dois indicadores,
a esquerda e a direita,
que eu posso usar para rolar novamente pelo carrossel
clicando nesses indicadores aqui.
Então, usando esses controles,
tanto o controle anterior quanto o próximo e os indicadores aqui,
eu posso navegar para o slide específico no meu carrossel.
Isso completa este exercício.
Este é um bom momento para você fazer um git-commit com o carrossel de mensagem.