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

2
00:00:04,523 --> 00:00:10,934
Muchos de los componentes basados en JavaScript de Bootstrap nos proporcionan un mecanismo

3
00:00:10,934 --> 00:00:17,070
para controlar algunas de las características de estos componentes escribiendo código JavaScript,

4
00:00:17,070 --> 00:00:21,510
en particular, escribiendo código Usando la sintaxis jQuery.

5
00:00:21,510 --> 00:00:26,181
Así que vamos a explorar este ejercicio de índice utilizando algunos

6
00:00:26,181 --> 00:00:30,561
controles basados en JavaScript para nuestro Carrusel que

7
00:00:30,561 --> 00:00:35,537
incluimos en la página index.html en el ejercicio anterior.

8
00:00:37,171 --> 00:00:42,810
En el ejercicio anterior, introdujimos este carrusel en nuestra página index.html.

9
00:00:42,810 --> 00:00:47,260
Lo que me gustaría hacer en este ejercicio es introducir un par de

10
00:00:47,260 --> 00:00:50,240
botones de control en este carrusel, y

11
00:00:50,240 --> 00:00:54,920
luego usar JavaScript para poder activar estos botones.

12
00:00:54,920 --> 00:00:57,850
Los botones se utilizarían para pausar y

13
00:00:57,850 --> 00:01:03,350
reproducir la acción deslizante de este carrusel.

14
00:01:03,350 --> 00:01:08,410
Así, incluyendo el botón en nuestro Carrusel aquí,

15
00:01:08,410 --> 00:01:13,000
podemos hacer clic en un botón para detener la acción deslizante del Carrusel, y

16
00:01:13,000 --> 00:01:18,070
luego podemos hacer clic en otro botón para reanudar la acción deslizante del Carrusel.

17
00:01:18,070 --> 00:01:21,390
Por lo tanto, eso es lo que podemos explorar en este ejercicio.

18
00:01:22,520 --> 00:01:26,920
Para comenzar en este ejercicio, iremos a la página index.html.

19
00:01:26,920 --> 00:01:32,420
Y justo después de los controles izquierdo y derecho de nuestro Carrusel,

20
00:01:32,420 --> 00:01:40,400
presentaré un div con el grupo de botones de clase.

21
00:01:40,400 --> 00:01:47,023
Entonces esto incluirá un grupo de botones de dos botones aquí, y luego con una ID de,

22
00:01:50,699 --> 00:01:54,224
CarouselButton y

23
00:01:54,224 --> 00:01:59,290
cerrará el div allí.

24
00:01:59,290 --> 00:02:03,530
Ahora, dentro de esto, voy a añadir dos botones.

25
00:02:03,530 --> 00:02:12,385
Así que permítanme agregar un botón con la clase btn, btn-danger,

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

27
00:02:16,910 --> 00:02:24,030
una identificación de carousel-pausa.

28
00:02:24,030 --> 00:02:30,970
Así que esto va a actuar como el botón de pausa, ralentiza el botón allí.

29
00:02:30,970 --> 00:02:36,600
Y para este botón, Voy a introducir

30
00:02:36,600 --> 00:02:41,201
una fuente como un icono con la clase fa,

31
00:02:42,923 --> 00:02:49,410
pausa, y cerrar el lapso.

32
00:02:49,410 --> 00:02:55,790
Así que esto introducirá un botón de pausa en el grupo de botones Carrusel.

33
00:02:55,790 --> 00:03:04,450
Voy a copiar esto y pegarlo de nuevo para crear otro botón.

34
00:03:04,450 --> 00:03:09,368
Ese segundo botón, llamaré btn btn-danger btn-sm, y

35
00:03:09,368 --> 00:03:12,259
entonces esto sería carrusel play.

36
00:03:13,300 --> 00:03:17,580
Y la clase span,

37
00:03:17,580 --> 00:03:21,660
el botón sería si jugara aquí.

38
00:03:23,940 --> 00:03:27,965
Digamos que los cambios e ir y echar un vistazo rápido en la página web.

39
00:03:29,180 --> 00:03:34,850
Echando un vistazo a los botones tal como existen en nuestro navegador, puedes ver que

40
00:03:34,850 --> 00:03:39,940
estos dos botones están ahora colocados en la esquina izquierda de mi carrusel.

41
00:03:40,970 --> 00:03:44,660
Me gustaría cambiar la posición de estos botones en el borde derecho, para

42
00:03:44,660 --> 00:03:51,700
que no cause este espacio azul y vacío debajo de la imagen aquí.

43
00:03:51,700 --> 00:03:56,410
Así que permítanme usar un par de propiedades CSS para reposicionar estos botones en

44
00:03:56,410 --> 00:03:59,230
la columna derecha del carrusel.

45
00:04:00,760 --> 00:04:04,140
Ir a ese archivo CSS de inicio de estilo,

46
00:04:04,140 --> 00:04:08,440
permítanme introducir un código CSS aquí.

47
00:04:08,440 --> 00:04:14,166
Entonces, para el elemento con el ID CarouselButtons,

48
00:04:14,166 --> 00:04:18,880
lo estoy posicionando en el borde derecho y en la parte inferior, 0 píxel aquí.

49
00:04:18,880 --> 00:04:22,280
Así que estos dos y luego la posición es absoluta.

50
00:04:22,280 --> 00:04:28,300
Así que esto colocará estos botones en la esquina derecha de mi carrusel.

51
00:04:29,710 --> 00:04:34,280
Obviamente, simplemente introducir los botones en el carrusel no servirá para

52
00:04:34,280 --> 00:04:35,420
ningún propósito.

53
00:04:35,420 --> 00:04:40,330
Ahora, vamos a aprovechar los controles de JavaScript que

54
00:04:40,330 --> 00:04:46,310
proporciona el Carrusel escribiendo un poco de código jQuery en

55
00:04:46,310 --> 00:04:52,204
la parte inferior de la página index.html para hacer que estos botones hagan su trabajo.

56
00:04:52,204 --> 00:04:57,950
Queremos poder hacer una pausa y reanudar la acción de deslizamiento de mi Carrusel.

57
00:04:58,970 --> 00:05:06,830
Ir a la parte inferior de la página index.html, permítanme presentar un script aquí.

58
00:05:06,830 --> 00:05:10,980
Por lo tanto, este script debe contener algún

59
00:05:10,980 --> 00:05:15,750
código JavaScript escrito en la sintaxis jQuery.

60
00:05:15,750 --> 00:05:19,088
Así que voy a decir,

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

62
00:05:28,664 --> 00:05:33,814
esta función debería contener un par de

63
00:05:33,814 --> 00:05:39,320
funciones aquí para activar los botones.

64
00:05:39,320 --> 00:05:45,430
Así que yo diría, micarrusel.

65
00:05:45,430 --> 00:05:50,427
Este es el ID del carrusel que se nos presenta,

66
00:05:50,427 --> 00:05:53,099
por lo que diríamos, carrusel,

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

68
00:06:01,804 --> 00:06:06,720
Así que lo que esto hace es establecer el intervalo de deslizamiento del carrusel en

69
00:06:06,720 --> 00:06:10,130
2000 milisegundos o 2 segundos.

70
00:06:10,130 --> 00:06:12,890
Así que estoy haciendo un poco más rápido para que

71
00:06:12,890 --> 00:06:16,330
la acción de deslizamiento tenga lugar en el Carrusel.

72
00:06:16,330 --> 00:06:20,430
Continúe con el código jQuery aquí.

73
00:06:20,430 --> 00:06:26,835
Ahora voy a activar ese botón de pausa, así que voy a decir carrusel pausa.

74
00:06:26,835 --> 00:06:31,430
Así que esa es la identificación que le di al botón de pausa allí.

75
00:06:31,430 --> 00:06:34,960
Así que esa es la razón para dar la identificación,

76
00:06:34,960 --> 00:06:38,720
así que quiero activar el botón de pausa.

77
00:06:38,720 --> 00:06:40,980
Así que digo cuando el usuario hace clic.

78
00:06:40,980 --> 00:06:42,920
Para que pueda ver cómo leer la sintaxis.

79
00:06:42,920 --> 00:06:47,470
Entonces esto dice, para el botón de pausa carrusel,

80
00:06:47,470 --> 00:06:53,510
si el usuario realiza una acción de clic, ejecute

81
00:06:53,510 --> 00:07:01,000
esta función particular que especifico dentro de este código aquí.

82
00:07:01,000 --> 00:07:03,140
¿ Cuál es la función que quiero hacer?

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

84
00:07:09,144 --> 00:07:15,200
pausar el carrusel.

85
00:07:15,200 --> 00:07:20,665
Así que diríamos, carrusel ('pausa').

86
00:07:21,860 --> 00:07:29,884
Así que ahora ves cómo has usado los controles basados en jQuery.

87
00:07:29,884 --> 00:07:36,020
Los controles de JavaScript que se dan para el componente Bootstrap Carousel y

88
00:07:36,020 --> 00:07:41,611
escribieron algún código para poder controlar el Carrusel.

89
00:07:41,611 --> 00:07:46,060
Del mismo modo, quiero poder activar el botón de reproducción.

90
00:07:46,060 --> 00:07:48,410
Así que cuando se hace clic en el botón de reproducción,

91
00:07:48,410 --> 00:07:52,380
quiero que se reanude la acción deslizante del carrusel.

92
00:07:52,380 --> 00:07:56,950
Así que simplemente copiaré este código, lo pegaré allí.

93
00:07:56,950 --> 00:08:00,720
Y luego diría carrusel play,

94
00:08:00,720 --> 00:08:07,130
haga clic en función de mi carrusel y luego la función dice carrusel ('ciclo').

95
00:08:07,130 --> 00:08:12,477
Así es como especificas que el carrusel

96
00:08:12,477 --> 00:08:16,850
debe reanudar el deslizamiento como antes.

97
00:08:16,850 --> 00:08:21,620
Así que esta, esta función que estamos adjuntando al botón de reproducción aquí.

98
00:08:21,620 --> 00:08:23,380
Así que con estos dos,

99
00:08:23,380 --> 00:08:28,800
nuestra función se introduce dentro de esta función lista de documentos.

100
00:08:28,800 --> 00:08:33,870
Estás listo para activar el Carrusel,

101
00:08:33,870 --> 00:08:38,690
y los dos botones para poder controlar el comportamiento de nuestro Carrusel.

102
00:08:38,690 --> 00:08:43,240
Así que vamos a mostrar los cambios, y vamos a echar un vistazo al comportamiento de nuestro Carrusel. Al

103
00:08:44,570 --> 00:08:50,084
ir a nuestra página, ahora ves que tu Carrusel se mueve muy rápido,

104
00:08:50,084 --> 00:08:55,603
porque establecí el intervalo a 2.000 milisegundos o 2 segundos.

105
00:08:55,603 --> 00:08:59,640
Así que cada dos segundos, verá la acción deslizante del carrusel.

106
00:08:59,640 --> 00:09:01,380
Esto es definitivamente molesto.

107
00:09:01,380 --> 00:09:05,410
Así que permítanme hacer una pausa haciendo clic en el botón de pausa.

108
00:09:05,410 --> 00:09:11,080
Así que cuando haces clic en el botón de pausa, la acción de deslizamiento de tu carrusel se detiene.

109
00:09:11,080 --> 00:09:15,080
Porque al hacer clic en el botón de pausa, entonces la función que

110
00:09:16,820 --> 00:09:21,360
introdujimos en el código JavaScript entra en acción y

111
00:09:21,360 --> 00:09:24,520
luego pausa el movimiento del carrusel.

112
00:09:24,520 --> 00:09:28,354
Ahora, si desea reanudar, haga clic en el botón de reproducción y

113
00:09:28,354 --> 00:09:31,980
luego el carrusel debería reanudar su movimiento.

114
00:09:31,980 --> 00:09:37,044
Como puede ver, en el momento en que hace clic en un botón de reproducción, el carrusel comienza a moverse.

115
00:09:37,044 --> 00:09:43,125
Ahora, por supuesto, usted puede mejorar más sobre cómo crear estos botones y así sucesivamente,

116
00:09:43,125 --> 00:09:48,350
pero esta es una manera simple que podemos introducir para controlar nuestro Carrusel.

117
00:09:50,110 --> 00:09:55,400
Este ejercicio ilustra cómo podemos usar el código JavaScript

118
00:09:55,400 --> 00:10:00,650
para poder controlar nuestros componentes basados en JavaScript de Bootstrap.

119
00:10:00,650 --> 00:10:03,933
Este es un buen momento para hacer un comentario de

120
00:10:03,933 --> 00:10:08,365
su código con el mensaje Bootstrap jQuery.

121
00:10:08,365 --> 00:10:14,422
[ MÚSICA]