Carrusel
Un "carousel" es una componente que muestra un conjunto de diapositivas (imágenes generalmente), avanza en forma automática cada diapositiva y luego de la última pasa a mostrar la primera.
Se pueden activar dos botones a izquierda y derecha para que el usuario pueda retroceder o avanzar diapositivas. Además de unos pequeños indicadores para elegir cualquiera de las imágenes.
Los carruseles no normalizan automáticamente las dimensiones de las diapositivas. Como tal, es posible que deba usar utilidades adicionales o estilos personalizados para dimensionar el contenido de manera adecuada. Si bien los carruseles admiten controles e indicadores anteriores/siguientes, no se requieren explícitamente.
Solo diapositivas:
Aquí hay un carrusel solo con diapositivas. Se debe tener en cuenta la presencia de .d-block y .img-fluid en las imágenes del carrusel para evitar la alineación de imágenes predeterminada del navegador.
- Se define un div con las clases "carousel" y "slide".
- Se define un div secundario con la clase "carousel-inner", el cual contendrá las diapositivas.
- Cada diapositiva esta dentro de un div con la clase "carousel-item".
- Cada diapositiva (img) debe tener la clase "w-100" para que ocupe todo el ancho de su contenedor y la clase "d-block" para que se muestre en bloque.
- La clase .active debe agregarse a una de las diapositivas. De lo contrario, el carrusel no será visible.
Controles:
- Para agregar los controles se debe tener un id para el div con la clase "carousel".
- Ese id se debe utilizar como ancla mediante 2 etiquetas <a> que se encuentran despues del div de clase "carousel-inner".
- Un <a> contiene la clase "carousel-control-prev" y el otro contiene la clase "carousel-control-next".
- Cada etiqueta <a> contiene 2 <span> los cuales son para generar los iconos de los controles.
- <span class="carousel-control-next-icon" aria-hidden="true">
- <span class="sr-only">
Indicadores:
También es posible agregar los indicadores al carrusel, junto con los controles.
- A fuera del div.carousel-inner se agrega un <ol> con clase "carousel-indicators".
- Cada <li> debe tener los siguientes atributos y valores: data-target="#id-del-carrusel" data-slide-to="numero de la diapositiva (0, 1, 2, etc)".
- El primer <li> debe tener la clase "active"
Titulos:
Dentro de los carrusel-item se agrega un div con la clase "carousel-caption". El cual contiene una etiqueta de titulo.
