1
00:00:00,000 --> 00:00:04,523
[MUSIC]

2
00:00:04,523 --> 00:00:10,934
Muitos dos componentes baseados em JavaScript do Bootstrap nos fornecem um mecanismo

3
00:00:10,934 --> 00:00:17,070
para controlar alguns dos recursos desses componentes escrevendo código JavaScript,

4
00:00:17,070 --> 00:00:21,510
em particular, escrevendo código Usando a sintaxe jQuery.

5
00:00:21,510 --> 00:00:26,181
Então, vamos explorar este exercício de índice usando alguns

6
00:00:26,181 --> 00:00:30,561
controles baseados em JavaScript para o nosso Carrossel que

7
00:00:30,561 --> 00:00:35,537
incluímos na página index.html no exercício anterior.

8
00:00:37,171 --> 00:00:42,810
No exercício anterior, introduzimos este Carrossel em nossa página index.html.

9
00:00:42,810 --> 00:00:47,260
O que eu gostaria de fazer neste exercício é introduzir alguns

10
00:00:47,260 --> 00:00:50,240
botões de controle neste carrossel, e

11
00:00:50,240 --> 00:00:54,920
então usar JavaScript para poder ativar esses botões.

12
00:00:54,920 --> 00:00:57,850
Os botões seriam usados para pausar e

13
00:00:57,850 --> 00:01:03,350
reproduzir a ação deslizante deste Carrossel.

14
00:01:03,350 --> 00:01:08,410
Então, incluindo o botão em nosso carrossel aqui,

15
00:01:08,410 --> 00:01:13,000
podemos clicar em um botão para parar a ação deslizante do carrossel, e

16
00:01:13,000 --> 00:01:18,070
então podemos clicar em outro botão para retomar a ação deslizante do carrossel.

17
00:01:18,070 --> 00:01:21,390
Então, isso é o que podemos explorar neste exercício.

18
00:01:22,520 --> 00:01:26,920
Para começar este exercício, vamos para a página index.html.

19
00:01:26,920 --> 00:01:32,420
E logo após os controles esquerdo e direito do nosso carrossel,

20
00:01:32,420 --> 00:01:40,400
vou introduzir uma div com o grupo de botões de classe.

21
00:01:40,400 --> 00:01:47,023
Então, isso irá incluir um grupo de botões de dois botões aqui, e, em seguida, com um ID de,

22
00:01:50,699 --> 00:01:54,224
carouselButton e

23
00:01:54,224 --> 00:01:59,290
fechar a div lá.

24
00:01:59,290 --> 00:02:03,530
Agora, dentro disso, vou adicionar dois botões.

25
00:02:03,530 --> 00:02:12,385
Então deixe-me adicionar em um botão com a classe btn, btn-danger,

26
00:02:12,385 --> 00:02:16,910
btn-small, e

27
00:02:16,910 --> 00:02:24,030
um id de carrossel pause.

28
00:02:24,030 --> 00:02:30,970
Então isso vai atuar como o botão de pausa, desacelera o botão lá.

29
00:02:30,970 --> 00:02:36,600
E para este botão, Eu vou introduzir

30
00:02:36,600 --> 00:02:41,201
uma fonte como um ícone com a fa classe,

31
00:02:42,923 --> 00:02:49,410
pausa, e fechar o span.

32
00:02:49,410 --> 00:02:55,790
Então, isso irá introduzir um botão de pausa no grupo de botões de carrossel.

33
00:02:55,790 --> 00:03:04,450
Vou copiar isso e colá-lo novamente para criar outro botão.

34
00:03:04,450 --> 00:03:09,368
Esse segundo botão, vou chamar btn btn-danger btn-sm, e

35
00:03:09,368 --> 00:03:12,259
então isso seria carrossel play.

36
00:03:13,300 --> 00:03:17,580
E a classe span,

37
00:03:17,580 --> 00:03:21,660
o botão seria se ele tocar aqui.

38
00:03:23,940 --> 00:03:27,965
Vamos dizer que as mudanças e ir e dar uma olhada rápida nele na página web.

39
00:03:29,180 --> 00:03:34,850
Olhando para os botões como eles existem em nosso navegador, você pode ver que

40
00:03:34,850 --> 00:03:39,940
esses dois botões agora estão posicionados no canto esquerdo do meu carrossel.

41
00:03:40,970 --> 00:03:44,660
Eu gostaria de reposicionar esses botões para a borda direita, para

42
00:03:44,660 --> 00:03:51,700
que ele não cause esse espaço azul e vazio embaixo da imagem aqui.

43
00:03:51,700 --> 00:03:56,410
Então deixe-me usar algumas propriedades CSS para reposicionar esses botões para

44
00:03:56,410 --> 00:03:59,230
a coluna direita do carrossel.

45
00:04:00,760 --> 00:04:04,140
Indo para esse estilo iniciar arquivo CSS,

46
00:04:04,140 --> 00:04:08,440
deixe-me introduzir algum código CSS aqui.

47
00:04:08,440 --> 00:04:14,166
Então, para o elemento com o ID carouselButtons,

48
00:04:14,166 --> 00:04:18,880
eu estou posicionando-o para a borda direita e inferior, 0 pixel aqui.

49
00:04:18,880 --> 00:04:22,280
Então estes dois e, em seguida, a posição é absoluta.

50
00:04:22,280 --> 00:04:28,300
Então isso posicionará esses botões no canto direito do meu carrossel.

51
00:04:29,710 --> 00:04:34,280
Obviamente, apenas introduzir os botões no carrossel não servirá para

52
00:04:34,280 --> 00:04:35,420
nenhum propósito.

53
00:04:35,420 --> 00:04:40,330
Agora, vamos tirar proveito dos controles JavaScript que

54
00:04:40,330 --> 00:04:46,310
o Carrossel fornece escrevendo um pouco de código jQuery na

55
00:04:46,310 --> 00:04:52,204
parte inferior da página index.html para fazer esses botões fazer seu trabalho.

56
00:04:52,204 --> 00:04:57,950
Queremos ser capazes de pausar e retomar a ação deslizante do meu carrossel.

57
00:04:58,970 --> 00:05:06,830
Indo para a parte inferior da página index.html, deixe-me apresentar algum script aqui.

58
00:05:06,830 --> 00:05:10,980
Portanto, este script deve conter algum

59
00:05:10,980 --> 00:05:15,750
código JavaScript escrito na sintaxe jQuery.

60
00:05:15,750 --> 00:05:19,088
Então eu vou dizer,

61
00:05:19,088 --> 00:05:28,664
$ (document) .ready (function), E

62
00:05:28,664 --> 00:05:33,814
esta função deve conter um par de

63
00:05:33,814 --> 00:05:39,320
funções aqui para ativar os botões.

64
00:05:39,320 --> 00:05:45,430
Então eu diria, mycarrossel.

65
00:05:45,430 --> 00:05:50,427
Este é o ID do carrossel que somos introduzidos,

66
00:05:50,427 --> 00:05:53,099
então diríamos, carrossel,

67
00:05:56,960 --> 00:06:01,804
Intervalo: 2000.

68
00:06:01,804 --> 00:06:06,720
Então o que isso faz é que ele define o intervalo de deslizamento do carrossel

69
00:06:06,720 --> 00:06:10,130
para 2000 milissegundos ou 2 segundos.

70
00:06:10,130 --> 00:06:12,890
Então eu estou tornando um pouco mais rápido para

71
00:06:12,890 --> 00:06:16,330
a ação deslizante acontecer no Carrossel.

72
00:06:16,330 --> 00:06:20,430
Continue com o código jQuery aqui.

73
00:06:20,430 --> 00:06:26,835
Vou ativar o botão de pausa, então vou dizer “Carrossel pause”.

74
00:06:26,835 --> 00:06:31,430
Então esse é o ID que dei para o botão de pausa.

75
00:06:31,430 --> 00:06:34,960
Então essa é a razão para dar o id.

76
00:06:34,960 --> 00:06:38,720
Então eu quero ativar o botão de pausa.

77
00:06:38,720 --> 00:06:40,980
Então eu digo quando o usuário clica.

78
00:06:40,980 --> 00:06:42,920
Então você pode ver como ler a sintaxe.

79
00:06:42,920 --> 00:06:47,470
Então isto diz, para o botão de pausa carrossel,

80
00:06:47,470 --> 00:06:53,510
se uma ação de clique é feita pelo usuário, então execute

81
00:06:53,510 --> 00:07:01,000
esta função específica que eu especifico dentro deste código aqui.

82
00:07:01,000 --> 00:07:03,140
Qual é a função que eu quero fazer?

83
00:07:03,140 --> 00:07:05,324
Eu quero ser capaz de,

84
00:07:09,144 --> 00:07:15,200
pausar o carrossel.

85
00:07:15,200 --> 00:07:20,665
Então nós diríamos, carrossel ('pausa').

86
00:07:21,860 --> 00:07:29,884
Então agora você vê como você usou os controles baseados em JQuery.

87
00:07:29,884 --> 00:07:36,020
Os controles JavaScript que são fornecidos para o componente Bootstrap Carousel e

88
00:07:36,020 --> 00:07:41,611
escreveram algum código para poder controlar o carrossel.

89
00:07:41,611 --> 00:07:46,060
Da mesma forma, eu quero ser capaz de ativar o botão play.

90
00:07:46,060 --> 00:07:48,410
Então, quando o botão play for clicado,

91
00:07:48,410 --> 00:07:52,380
eu quero que a ação deslizante do carrossel seja retomada.

92
00:07:52,380 --> 00:07:56,950
Então eu vou simplesmente copiar este código, colá-lo lá.

93
00:07:56,950 --> 00:08:00,720
E então eu diria carrossel play,

94
00:08:00,720 --> 00:08:07,130
clique função meu carrossel e, em seguida, a função diz carrossel ('ciclo').

95
00:08:07,130 --> 00:08:12,477
Essa é a maneira que você especifica que o carrossel

96
00:08:12,477 --> 00:08:16,850
deve continuar deslizando como antes.

97
00:08:16,850 --> 00:08:21,620
Então esta, esta função que estamos anexando ao botão play aqui.

98
00:08:21,620 --> 00:08:23,380
Então, com estes dois,

99
00:08:23,380 --> 00:08:28,800
nossa função é introduzida dentro desta função pronto documento.

100
00:08:28,800 --> 00:08:33,870
Você está pronto para que o Carrossel seja ativado,

101
00:08:33,870 --> 00:08:38,690
e os dois botões possam controlar o comportamento do nosso Carrossel.

102
00:08:38,690 --> 00:08:43,240
Então vamos mostrar as mudanças, e ir e dar uma olhada no comportamento do nosso carrossel.

103
00:08:44,570 --> 00:08:50,084
Indo para nossa página, agora você vê que seu carrossel está se movendo muito rápido,

104
00:08:50,084 --> 00:08:55,603
porque eu defini o intervalo para 2.000 milissegundos ou 2 segundos.

105
00:08:55,603 --> 00:08:59,640
Então, a cada dois segundos, você verá a ação deslizante do carrossel.

106
00:08:59,640 --> 00:09:01,380
Isto é definitivamente irritante.

107
00:09:01,380 --> 00:09:05,410
Então deixe-me pausar isso clicando no botão de pausa.

108
00:09:05,410 --> 00:09:11,080
Assim, quando você clica no botão de pausa, a ação deslizante do seu Carrossel é pausada.

109
00:09:11,080 --> 00:09:15,080
Porque quando você clica no botão de pausa, a função que

110
00:09:16,820 --> 00:09:21,360
introduzimos no código JavaScript entra em ação e

111
00:09:21,360 --> 00:09:24,520
, em seguida, pausa o movimento do carrossel.

112
00:09:24,520 --> 00:09:28,354
Agora, se você quiser retomar, clique no botão play e, em

113
00:09:28,354 --> 00:09:31,980
seguida, o carrossel deve retomar seu movimento.

114
00:09:31,980 --> 00:09:37,044
Então, como você pode ver, no momento em que você clica em um botão play, o carrossel começa a se mover.

115
00:09:37,044 --> 00:09:43,125
Agora, é claro, você pode melhorar mais em como você cria esses botões e assim por diante,

116
00:09:43,125 --> 00:09:48,350
mas esta é uma maneira simples que podemos introduzir para controlar nosso carrossel.

117
00:09:50,110 --> 00:09:55,400
Este exercício ilustra como podemos usar o código JavaScript

118
00:09:55,400 --> 00:10:00,650
para controlar nossos componentes baseados em JavaScript do Bootstrap.

119
00:10:00,650 --> 00:10:03,933
Este é um bom momento para fazer um comentário do

120
00:10:03,933 --> 00:10:08,365
seu código com a mensagem Bootstrap jQuery.

121
00:10:08,365 --> 00:10:14,422
[ MUSIC]