1
00:00:03,650 --> 00:00:09,125
Acabamos de aprender sobre el componente del carrusel en la conferencia anterior.

2
00:00:09,125 --> 00:00:14,324
En este ejercicio, vamos a añadir un carrusel a nuestra

3
00:00:14,324 --> 00:00:20,760
página index.html y en el proceso aprenderemos cómo funciona el componente del carrusel. Al

4
00:00:20,760 --> 00:00:24,090
ir a la página index.html,

5
00:00:24,090 --> 00:00:29,640
agregaremos una nueva fila en el div contenido,

6
00:00:29,640 --> 00:00:31,730
como la primera fila en el div.

7
00:00:31,730 --> 00:00:33,595
Así que entraré y diré,

8
00:00:33,595 --> 00:00:43,535
le daré contenido de fila de la clase div y dentro de este div,

9
00:00:43,535 --> 00:00:47,545
vamos a crear el componente carrusel.

10
00:00:47,545 --> 00:00:56,925
Y en lo que es div, agregaré en la columna interna div,

11
00:00:56,925 --> 00:01:02,045
que contendrá el componente carrusel aquí.

12
00:01:02,045 --> 00:01:04,135
Para agregar en el carrusel,

13
00:01:04,135 --> 00:01:13,630
aquí agregaré en el div con el ID mi carrusel y

14
00:01:13,630 --> 00:01:17,440
un carrusel de clase y

15
00:01:17,440 --> 00:01:24,170
diapositiva y la clase de viaje de datos.

16
00:01:24,170 --> 00:01:33,110
Para que pueda ver el componente JavaScript entrando en acción aquí,

17
00:01:33,110 --> 00:01:42,420
y luego cierre el div y comience a construir el carrusel dentro de este div aquí.

18
00:01:42,420 --> 00:01:44,995
Entonces, en este carrusel,

19
00:01:44,995 --> 00:01:49,580
agregaremos el contenido del carrusel siguiente.

20
00:01:49,580 --> 00:01:54,700
Así que entraré y luego agregaré otro div con la clase

21
00:01:56,740 --> 00:02:07,815
carousel-inner y el rol como cuadro de lista.

22
00:02:07,815 --> 00:02:15,380
Esta es la forma en que construimos el carrusel y luego cerramos ese div allí.

23
00:02:15,380 --> 00:02:22,955
Y dentro de este div de nuevo introduciremos divs que alojarán

24
00:02:22,955 --> 00:02:32,855
los elementos del carrusel aplicando la clase de elemento del carrusel.

25
00:02:32,855 --> 00:02:37,120
Y el primero en el artículo del carrusel...

26
00:02:37,240 --> 00:02:41,080
El primero en la clase de carrusel,

27
00:02:41,080 --> 00:02:42,595
aplicaré la clase activa.

28
00:02:42,595 --> 00:02:48,235
Entonces, este es el primer div que comienza conteniendo

29
00:02:48,235 --> 00:02:56,650
la diapositiva inicial allí y los restantes, voy a agregar.

30
00:02:56,650 --> 00:03:09,680
Permítanme agregar dos divs más de carrusel item

31
00:03:09,680 --> 00:03:16,630
aquí y aplicar solo el primero con la clase activa.

32
00:03:16,630 --> 00:03:21,445
Ahora voy a introducir el contenido en este carrusel artículos.

33
00:03:21,445 --> 00:03:25,165
Entonces, para construir un elemento de carrusel,

34
00:03:25,165 --> 00:03:33,770
entraré allí y luego incluiré una imagen con el bloque d de clase.

35
00:03:33,770 --> 00:03:35,655
Así que esto se utiliza para,

36
00:03:35,655 --> 00:03:43,930
esta es una clase flex que permite que nuestra imagen se coloque correctamente y luego agregue en

37
00:03:43,930 --> 00:03:53,240
la clase fluida de imagen y luego la fuente como img.

38
00:03:58,220 --> 00:04:03,595
Entonces, lo que haré es mover ese contenido de

39
00:04:03,595 --> 00:04:09,020
las tres filas de contenido a continuación y luego agregarlo al carrusel aquí.

40
00:04:15,470 --> 00:04:21,710
Así que agrego una imagen aquí y luego al carrusel,

41
00:04:21,710 --> 00:04:23,340
también puedo agregar

42
00:04:23,340 --> 00:04:28,200
un div con

43
00:04:28,200 --> 00:04:34,030
el título del carrusel de clase.

44
00:04:34,030 --> 00:04:38,780
Aquí podemos incluir algún texto que será retransmitido como un título sobre la imagen.

45
00:04:38,780 --> 00:04:48,450
Así que voy a decir carrusel título d-none, d-md-block.

46
00:04:48,740 --> 00:04:52,555
Y luego dentro de aquí,

47
00:04:52,555 --> 00:04:59,490
incluiré el contenido de las filas de contenido aquí.

48
00:04:59,490 --> 00:05:04,600
Así que entraré y copiaré el contenido de las filas de contenido

49
00:05:04,600 --> 00:05:14,330
aquí y luego lo pegaré en el bloque de subtítulos del carrusel aquí.

50
00:05:25,320 --> 00:05:32,315
Y eliminaré la clase que aplicamos al H2 de este contenido.

51
00:05:32,315 --> 00:05:35,850
Ahora, vamos a repetir lo mismo para los dos restantes copiando

52
00:05:35,850 --> 00:05:40,820
el contenido de las filas de contenido a continuación aquí.

53
00:05:40,820 --> 00:05:43,645
Así que, déjame completar eso y luego volveremos y echaremos

54
00:05:43,645 --> 00:05:47,225
un vistazo a cómo se ve el carrusel.

55
00:05:47,225 --> 00:05:49,940
Aquí puede ver que he completado

56
00:05:49,940 --> 00:05:56,440
los elementos restantes del carrusel aquí copiando el contenido de las filas de contenido a continuación.

57
00:05:56,440 --> 00:06:04,190
Agreguemos algunas clases CSS para que el carrusel esté bien estructurado.

58
00:06:04,190 --> 00:06:10,235
Así que yendo al archivo styles.css en la parte inferior aquí,

59
00:06:10,235 --> 00:06:17,410
voy a agregar un par de clases más aquí.

60
00:06:17,410 --> 00:06:19,710
Para la clase de carrusel,

61
00:06:19,710 --> 00:06:25,310
añadiría el fondo como 512DA8,

62
00:06:25,310 --> 00:06:30,280
que hemos usado antes de la clase de color oscuro.

63
00:06:30,280 --> 00:06:39,825
Y luego para la clase de elemento carrusel,

64
00:06:39,825 --> 00:06:47,400
voy a agregar una altura de 300 píxeles.

65
00:06:48,030 --> 00:06:59,195
Y para la imagen que se incluye dentro del elemento del carrusel,

66
00:06:59,195 --> 00:07:03,480
voy a aplicar algunas transformaciones aquí.

67
00:07:03,480 --> 00:07:10,830
Yo diría, posición absoluta.

68
00:07:10,830 --> 00:07:14,360
Quiero colocarla a la izquierda.

69
00:07:19,470 --> 00:07:29,290
Así que este cero superior e izquierdo colocará esta imagen en el borde superior izquierdo de

70
00:07:29,290 --> 00:07:33,700
la caja del carrusel allí y con

71
00:07:33,700 --> 00:07:41,050
una altura mínima establecida en 300 píxeles para que coincida con la altura de los elementos del carrusel.

72
00:07:41,050 --> 00:07:45,680
Así que esta imagen esencialmente estirará toda la altura

73
00:07:45,680 --> 00:07:51,020
del carrusel, pero se colocará en el borde izquierdo de la caja del carrusel aquí.

74
00:07:51,020 --> 00:07:52,820
Así que déjame guardar los cambios.

75
00:07:52,820 --> 00:07:58,235
Vamos a echar un vistazo a cómo se ve este carrusel en nuestra página web. Al

76
00:07:58,235 --> 00:07:59,770
ir a la página web,

77
00:07:59,770 --> 00:08:05,460
ahora puede ver ese carrusel en acción en nuestra página de la tabla de estudio del índice.

78
00:08:05,460 --> 00:08:09,000
Así que puedes ver que el carrusel está

79
00:08:09,000 --> 00:08:13,905
colocado en la parte superior aquí y luego seguiremos desplazándonos a intervalos regulares.

80
00:08:13,905 --> 00:08:16,470
Tenga en cuenta que al usar las clases CSS,

81
00:08:16,470 --> 00:08:21,925
he diseñado el fondo del carrusel de manera que los subtítulos son

82
00:08:21,925 --> 00:08:24,745
claramente visibles en el carrusel

83
00:08:24,745 --> 00:08:28,305
y también cómo se ha colocado la imagen en el carrusel.

84
00:08:28,305 --> 00:08:33,865
La altura de esta diapositiva de carrusel se fija en 300 píxeles.

85
00:08:33,865 --> 00:08:37,750
Por lo tanto, esto da un buen diseño limpio para este carrusel.

86
00:08:37,750 --> 00:08:42,855
Ahora, agreguemos algunos controles para este carrusel.

87
00:08:42,855 --> 00:08:46,155
Volviendo a index.html.

88
00:08:46,155 --> 00:08:56,015
Justo después del carrusel en nuestra caja aquí pero aún dentro del carrusel,

89
00:08:56,015 --> 00:09:05,170
voy a añadir un OL para introducir algunos controles manuales para el carrusel.

90
00:09:05,170 --> 00:09:10,490
Y con los indicadores de carrusel de clase.

91
00:09:12,400 --> 00:09:16,570
Estos indicadores se colocarán en

92
00:09:16,570 --> 00:09:24,095
las diapositivas del carrusel para indicar qué diapositiva particular se está mostrando actualmente.

93
00:09:24,095 --> 00:09:28,760
Así que permítanme introducir en el contenido aquí, así que digo OL,

94
00:09:28,760 --> 00:09:30,630
uso el OL para esto.

95
00:09:30,630 --> 00:09:34,175
Y luego, dentro de ahí uso la lista con

96
00:09:34,175 --> 00:09:42,175
el objetivo de datos establecido en mi carrusel.

97
00:09:42,175 --> 00:09:49,460
Así que este es el ID del carrusel y la diapositiva de datos.

98
00:09:49,460 --> 00:09:55,880
Y los primeros indicadores se deslizarán a la diapositiva número cero.

99
00:09:56,870 --> 00:10:08,080
Con esa clase como activa para el primer elemento de esta lista,

100
00:10:08,460 --> 00:10:18,870
entonces los dos elementos restantes que simplemente voy a usar lista con el objetivo de datos

101
00:10:18,870 --> 00:10:24,510
establecido igual a mi carrusel

102
00:10:24,510 --> 00:10:30,310
y la diapositiva de datos se establece en uno.

103
00:10:30,310 --> 00:10:33,150
Por lo tanto, esto es para la segunda diapositiva de allí.

104
00:10:33,150 --> 00:10:38,755
Voy a copiar este y luego crear el tercer indicador aquí.

105
00:10:38,755 --> 00:10:47,740
Así que vamos a entrar y copiar esto y luego cambiar esto a la diapositiva de datos a dos.

106
00:10:47,740 --> 00:10:54,685
Así que tenemos diapositivas libres en nuestro carrusel para que tres indicadores sean suficientes.

107
00:10:54,685 --> 00:10:58,540
Ahora, también vamos a añadir un par de controles a

108
00:10:58,540 --> 00:11:02,435
este carrusel que nos permite desplazar manualmente el carrusel.

109
00:11:02,435 --> 00:11:06,580
Para hacer eso, presentaré una A con

110
00:11:06,580 --> 00:11:13,705
la clase carousel-control-prev aquí.

111
00:11:13,705 --> 00:11:17,065
Así que esto me permitiría ir a la diapositiva anterior,

112
00:11:17,065 --> 00:11:22,710
hacer que el href sea igual a micarrusel, para que

113
00:11:22,710 --> 00:11:30,220
pueda ver que estamos tratando de apuntar al carrusel allí y el papel es un botón.

114
00:11:30,220 --> 00:11:38,730
Así que esto va a actuar como un botón y una diapositiva de datos como antes.

115
00:11:38,730 --> 00:11:41,620
Así que dentro de esta A,

116
00:11:44,530 --> 00:11:52,635
introduciré un icono

117
00:11:52,635 --> 00:11:55,810
para representar este control en la pantalla.

118
00:11:55,810 --> 00:12:01,310
Entonces, diré, abarque la clase carousel-control-prev-icon

119
00:12:01,960 --> 00:12:12,560
y cierre el lapso aquí.

120
00:12:12,560 --> 00:12:18,210
Ahora copiaré este control.

121
00:12:19,890 --> 00:12:28,950
Y pegarlo aquí y luego crear el control para la siguiente diapositiva aquí, así que diría,

122
00:12:28,950 --> 00:12:34,440
carousel-control-next and roll es un botón y la diapositiva de datos utilizada para

123
00:12:34,440 --> 00:12:41,315
siguiente y el icono sería carrusel control-siguiente icono.

124
00:12:41,315 --> 00:12:45,275
Así que añadiendo estos en mi carrusel,

125
00:12:45,275 --> 00:12:49,595
vamos a echar un vistazo a nuestro carrusel en este momento.

126
00:12:49,595 --> 00:12:51,395
Al ir al carrusel,

127
00:12:51,395 --> 00:12:57,325
ahora se puede ver que en mi carrusel tengo tres botones indicadores aquí,

128
00:12:57,325 --> 00:13:02,830
que indican qué diapositiva particular está

129
00:13:02,830 --> 00:13:08,085
visible actualmente en mi carrusel y como las diapositivas diapositivas,

130
00:13:08,085 --> 00:13:11,380
entonces el indicador también cambia correspondientemente para

131
00:13:11,380 --> 00:13:15,150
indicar qué diapositiva particular es visible.

132
00:13:15,150 --> 00:13:21,810
Puedo hacer clic manualmente en uno de ellos e ir a la diapositiva específica en el carrusel.

133
00:13:21,810 --> 00:13:26,320
No sólo eso, se puede ver que ahora hay dos indicadores,

134
00:13:26,320 --> 00:13:27,980
la izquierda y la derecha,

135
00:13:27,980 --> 00:13:32,120
que puedo utilizar para volver a desplazarme por el carrusel

136
00:13:32,120 --> 00:13:36,715
haciendo clic en estos indicadores aquí.

137
00:13:36,715 --> 00:13:38,490
Así que usando estos controles,

138
00:13:38,490 --> 00:13:43,660
tanto el control anterior como el siguiente y los indicadores aquí,

139
00:13:43,660 --> 00:13:51,155
puedo navegar a la diapositiva específica en mi carrusel.

140
00:13:51,155 --> 00:13:53,635
Esto completa este ejercicio.

141
00:13:53,635 --> 00:13:59,350
Este es un buen momento para que hagas un git-commit con el carrusel de mensajes.