[MUSIC]
Muitos dos componentes baseados em JavaScript do Bootstrap nos fornecem um mecanismo
para controlar alguns dos recursos desses componentes escrevendo código JavaScript,
em particular, escrevendo código Usando a sintaxe jQuery.
Então, vamos explorar este exercício de índice usando alguns
controles baseados em JavaScript para o nosso Carrossel que
incluímos na página index.html no exercício anterior.
No exercício anterior, introduzimos este Carrossel em nossa página index.html.
O que eu gostaria de fazer neste exercício é introduzir alguns
botões de controle neste carrossel, e
então usar JavaScript para poder ativar esses botões.
Os botões seriam usados para pausar e
reproduzir a ação deslizante deste Carrossel.
Então, incluindo o botão em nosso carrossel aqui,
podemos clicar em um botão para parar a ação deslizante do carrossel, e
então podemos clicar em outro botão para retomar a ação deslizante do carrossel.
Então, isso é o que podemos explorar neste exercício.
Para começar este exercício, vamos para a página index.html.
E logo após os controles esquerdo e direito do nosso carrossel,
vou introduzir uma div com o grupo de botões de classe.
Então, isso irá incluir um grupo de botões de dois botões aqui, e, em seguida, com um ID de,
carouselButton e
fechar a div lá.
Agora, dentro disso, vou adicionar dois botões.
Então deixe-me adicionar em um botão com a classe btn, btn-danger,
btn-small, e
um id de carrossel pause.
Então isso vai atuar como o botão de pausa, desacelera o botão lá.
E para este botão, Eu vou introduzir
uma fonte como um ícone com a fa classe,
pausa, e fechar o span.
Então, isso irá introduzir um botão de pausa no grupo de botões de carrossel.
Vou copiar isso e colá-lo novamente para criar outro botão.
Esse segundo botão, vou chamar btn btn-danger btn-sm, e
então isso seria carrossel play.
E a classe span,
o botão seria se ele tocar aqui.
Vamos dizer que as mudanças e ir e dar uma olhada rápida nele na página web.
Olhando para os botões como eles existem em nosso navegador, você pode ver que
esses dois botões agora estão posicionados no canto esquerdo do meu carrossel.
Eu gostaria de reposicionar esses botões para a borda direita, para
que ele não cause esse espaço azul e vazio embaixo da imagem aqui.
Então deixe-me usar algumas propriedades CSS para reposicionar esses botões para
a coluna direita do carrossel.
Indo para esse estilo iniciar arquivo CSS,
deixe-me introduzir algum código CSS aqui.
Então, para o elemento com o ID carouselButtons,
eu estou posicionando-o para a borda direita e inferior, 0 pixel aqui.
Então estes dois e, em seguida, a posição é absoluta.
Então isso posicionará esses botões no canto direito do meu carrossel.
Obviamente, apenas introduzir os botões no carrossel não servirá para
nenhum propósito.
Agora, vamos tirar proveito dos controles JavaScript que
o Carrossel fornece escrevendo um pouco de código jQuery na
parte inferior da página index.html para fazer esses botões fazer seu trabalho.
Queremos ser capazes de pausar e retomar a ação deslizante do meu carrossel.
Indo para a parte inferior da página index.html, deixe-me apresentar algum script aqui.
Portanto, este script deve conter algum
código JavaScript escrito na sintaxe jQuery.
Então eu vou dizer,
$ (document) .ready (function), E
esta função deve conter um par de
funções aqui para ativar os botões.
Então eu diria, mycarrossel.
Este é o ID do carrossel que somos introduzidos,
então diríamos, carrossel,
Intervalo: 2000.
Então o que isso faz é que ele define o intervalo de deslizamento do carrossel
para 2000 milissegundos ou 2 segundos.
Então eu estou tornando um pouco mais rápido para
a ação deslizante acontecer no Carrossel.
Continue com o código jQuery aqui.
Vou ativar o botão de pausa, então vou dizer “Carrossel pause”.
Então esse é o ID que dei para o botão de pausa.
Então essa é a razão para dar o id.
Então eu quero ativar o botão de pausa.
Então eu digo quando o usuário clica.
Então você pode ver como ler a sintaxe.
Então isto diz, para o botão de pausa carrossel,
se uma ação de clique é feita pelo usuário, então execute
esta função específica que eu especifico dentro deste código aqui.
Qual é a função que eu quero fazer?
Eu quero ser capaz de,
pausar o carrossel.
Então nós diríamos, carrossel ('pausa').
Então agora você vê como você usou os controles baseados em JQuery.
Os controles JavaScript que são fornecidos para o componente Bootstrap Carousel e
escreveram algum código para poder controlar o carrossel.
Da mesma forma, eu quero ser capaz de ativar o botão play.
Então, quando o botão play for clicado,
eu quero que a ação deslizante do carrossel seja retomada.
Então eu vou simplesmente copiar este código, colá-lo lá.
E então eu diria carrossel play,
clique função meu carrossel e, em seguida, a função diz carrossel ('ciclo').
Essa é a maneira que você especifica que o carrossel
deve continuar deslizando como antes.
Então esta, esta função que estamos anexando ao botão play aqui.
Então, com estes dois,
nossa função é introduzida dentro desta função pronto documento.
Você está pronto para que o Carrossel seja ativado,
e os dois botões possam controlar o comportamento do nosso Carrossel.
Então vamos mostrar as mudanças, e ir e dar uma olhada no comportamento do nosso carrossel.
Indo para nossa página, agora você vê que seu carrossel está se movendo muito rápido,
porque eu defini o intervalo para 2.000 milissegundos ou 2 segundos.
Então, a cada dois segundos, você verá a ação deslizante do carrossel.
Isto é definitivamente irritante.
Então deixe-me pausar isso clicando no botão de pausa.
Assim, quando você clica no botão de pausa, a ação deslizante do seu Carrossel é pausada.
Porque quando você clica no botão de pausa, a função que
introduzimos no código JavaScript entra em ação e
, em seguida, pausa o movimento do carrossel.
Agora, se você quiser retomar, clique no botão play e, em
seguida, o carrossel deve retomar seu movimento.
Então, como você pode ver, no momento em que você clica em um botão play, o carrossel começa a se mover.
Agora, é claro, você pode melhorar mais em como você cria esses botões e assim por diante,
mas esta é uma maneira simples que podemos introduzir para controlar nosso carrossel.
Este exercício ilustra como podemos usar o código JavaScript
para controlar nossos componentes baseados em JavaScript do Bootstrap.
Este é um bom momento para fazer um comentário do
seu código com a mensagem Bootstrap jQuery.
[ MUSIC]