Acabamos de aprender sobre el componente del carrusel en la conferencia anterior.
En este ejercicio, vamos a añadir un carrusel a nuestra
página index.html y en el proceso aprenderemos cómo funciona el componente del carrusel. Al
ir a la página index.html,
agregaremos una nueva fila en el div contenido,
como la primera fila en el div.
Así que entraré y diré,
le daré contenido de fila de la clase div y dentro de este div,
vamos a crear el componente carrusel.
Y en lo que es div, agregaré en la columna interna div,
que contendrá el componente carrusel aquí.
Para agregar en el carrusel,
aquí agregaré en el div con el ID mi carrusel y
un carrusel de clase y
diapositiva y la clase de viaje de datos.
Para que pueda ver el componente JavaScript entrando en acción aquí,
y luego cierre el div y comience a construir el carrusel dentro de este div aquí.
Entonces, en este carrusel,
agregaremos el contenido del carrusel siguiente.
Así que entraré y luego agregaré otro div con la clase
carousel-inner y el rol como cuadro de lista.
Esta es la forma en que construimos el carrusel y luego cerramos ese div allí.
Y dentro de este div de nuevo introduciremos divs que alojarán
los elementos del carrusel aplicando la clase de elemento del carrusel.
Y el primero en el artículo del carrusel...
El primero en la clase de carrusel,
aplicaré la clase activa.
Entonces, este es el primer div que comienza conteniendo
la diapositiva inicial allí y los restantes, voy a agregar.
Permítanme agregar dos divs más de carrusel item
aquí y aplicar solo el primero con la clase activa.
Ahora voy a introducir el contenido en este carrusel artículos.
Entonces, para construir un elemento de carrusel,
entraré allí y luego incluiré una imagen con el bloque d de clase.
Así que esto se utiliza para,
esta es una clase flex que permite que nuestra imagen se coloque correctamente y luego agregue en
la clase fluida de imagen y luego la fuente como img.
Entonces, lo que haré es mover ese contenido de
las tres filas de contenido a continuación y luego agregarlo al carrusel aquí.
Así que agrego una imagen aquí y luego al carrusel,
también puedo agregar
un div con
el título del carrusel de clase.
Aquí podemos incluir algún texto que será retransmitido como un título sobre la imagen.
Así que voy a decir carrusel título d-none, d-md-block.
Y luego dentro de aquí,
incluiré el contenido de las filas de contenido aquí.
Así que entraré y copiaré el contenido de las filas de contenido
aquí y luego lo pegaré en el bloque de subtítulos del carrusel aquí.
Y eliminaré la clase que aplicamos al H2 de este contenido.
Ahora, vamos a repetir lo mismo para los dos restantes copiando
el contenido de las filas de contenido a continuación aquí.
Así que, déjame completar eso y luego volveremos y echaremos
un vistazo a cómo se ve el carrusel.
Aquí puede ver que he completado
los elementos restantes del carrusel aquí copiando el contenido de las filas de contenido a continuación.
Agreguemos algunas clases CSS para que el carrusel esté bien estructurado.
Así que yendo al archivo styles.css en la parte inferior aquí,
voy a agregar un par de clases más aquí.
Para la clase de carrusel,
añadiría el fondo como 512DA8,
que hemos usado antes de la clase de color oscuro.
Y luego para la clase de elemento carrusel,
voy a agregar una altura de 300 píxeles.
Y para la imagen que se incluye dentro del elemento del carrusel,
voy a aplicar algunas transformaciones aquí.
Yo diría, posición absoluta.
Quiero colocarla a la izquierda.
Así que este cero superior e izquierdo colocará esta imagen en el borde superior izquierdo de
la caja del carrusel allí y con
una altura mínima establecida en 300 píxeles para que coincida con la altura de los elementos del carrusel.
Así que esta imagen esencialmente estirará toda la altura
del carrusel, pero se colocará en el borde izquierdo de la caja del carrusel aquí.
Así que déjame guardar los cambios.
Vamos a echar un vistazo a cómo se ve este carrusel en nuestra página web. Al
ir a la página web,
ahora puede ver ese carrusel en acción en nuestra página de la tabla de estudio del índice.
Así que puedes ver que el carrusel está
colocado en la parte superior aquí y luego seguiremos desplazándonos a intervalos regulares.
Tenga en cuenta que al usar las clases CSS,
he diseñado el fondo del carrusel de manera que los subtítulos son
claramente visibles en el carrusel
y también cómo se ha colocado la imagen en el carrusel.
La altura de esta diapositiva de carrusel se fija en 300 píxeles.
Por lo tanto, esto da un buen diseño limpio para este carrusel.
Ahora, agreguemos algunos controles para este carrusel.
Volviendo a index.html.
Justo después del carrusel en nuestra caja aquí pero aún dentro del carrusel,
voy a añadir un OL para introducir algunos controles manuales para el carrusel.
Y con los indicadores de carrusel de clase.
Estos indicadores se colocarán en
las diapositivas del carrusel para indicar qué diapositiva particular se está mostrando actualmente.
Así que permítanme introducir en el contenido aquí, así que digo OL,
uso el OL para esto.
Y luego, dentro de ahí uso la lista con
el objetivo de datos establecido en mi carrusel.
Así que este es el ID del carrusel y la diapositiva de datos.
Y los primeros indicadores se deslizarán a la diapositiva número cero.
Con esa clase como activa para el primer elemento de esta lista,
entonces los dos elementos restantes que simplemente voy a usar lista con el objetivo de datos
establecido igual a mi carrusel
y la diapositiva de datos se establece en uno.
Por lo tanto, esto es para la segunda diapositiva de allí.
Voy a copiar este y luego crear el tercer indicador aquí.
Así que vamos a entrar y copiar esto y luego cambiar esto a la diapositiva de datos a dos.
Así que tenemos diapositivas libres en nuestro carrusel para que tres indicadores sean suficientes.
Ahora, también vamos a añadir un par de controles a
este carrusel que nos permite desplazar manualmente el carrusel.
Para hacer eso, presentaré una A con
la clase carousel-control-prev aquí.
Así que esto me permitiría ir a la diapositiva anterior,
hacer que el href sea igual a micarrusel, para que
pueda ver que estamos tratando de apuntar al carrusel allí y el papel es un botón.
Así que esto va a actuar como un botón y una diapositiva de datos como antes.
Así que dentro de esta A,
introduciré un icono
para representar este control en la pantalla.
Entonces, diré, abarque la clase carousel-control-prev-icon
y cierre el lapso aquí.
Ahora copiaré este control.
Y pegarlo aquí y luego crear el control para la siguiente diapositiva aquí, así que diría,
carousel-control-next and roll es un botón y la diapositiva de datos utilizada para
siguiente y el icono sería carrusel control-siguiente icono.
Así que añadiendo estos en mi carrusel,
vamos a echar un vistazo a nuestro carrusel en este momento.
Al ir al carrusel,
ahora se puede ver que en mi carrusel tengo tres botones indicadores aquí,
que indican qué diapositiva particular está
visible actualmente en mi carrusel y como las diapositivas diapositivas,
entonces el indicador también cambia correspondientemente para
indicar qué diapositiva particular es visible.
Puedo hacer clic manualmente en uno de ellos e ir a la diapositiva específica en el carrusel.
No sólo eso, se puede ver que ahora hay dos indicadores,
la izquierda y la derecha,
que puedo utilizar para volver a desplazarme por el carrusel
haciendo clic en estos indicadores aquí.
Así que usando estos controles,
tanto el control anterior como el siguiente y los indicadores aquí,
puedo navegar a la diapositiva específica en mi carrusel.
Esto completa este ejercicio.
Este es un buen momento para que hagas un git-commit con el carrusel de mensajes.