--- title: Carousel localeTitle: Carrusel --- ## Carrusel Carrusel es un componente de presentación de diapositivas para recorrer elementos como imágenes o diapositivas de texto. Proporciona una forma dinámica de representar una gran cantidad de datos (texto o imágenes) deslizándolos o desplazándolos, de manera suave El código de muestra del control deslizante de imagen está debajo: ```html

``` Entendiendo los atributos y las clases usadas en el ejemplo anterior: ### 1) Atributos a) `data-ride` : - `data-ride ="carousel"` permite que comience la animación en la carga de la página. b) `data-target` : - apunta a la identificación del carrusel c) `data-slide-to` : - Especifica a qué diapositiva mover cuando se hace clic en los indicadores (puntos específicos). ### 2) Clases a) `carousel` : - `class="carousel"` especifica que el div contiene carrusel. b) `slide` : - Esta clase agrega transiciones CSS. c) `carousel-inner` : esto denota la sección de código que contendrá el texto / imagen que se mostrará en las diapositivas. d) `item` : se refiere al contenido que se mostrará en el carrusel. e) `left carousal-control` : - Esto agrega el botón de retroceso que permite deslizarse a la diapositiva anterior. f) `right carousal-control` : - Esto agrega el siguiente botón que permite deslizarse a la siguiente diapositiva. g) `carousel-caption` : - Esta clase le permite agregar títulos a cada diapositiva. Nota: Agregue `class="carousel-caption"` para cada elemento. ### Uso #### 1) A través de atributos de datos El atributo `data-ride="carousel"` se usa para marcar un carrusel como animado comenzando en la carga de la página. `data-slide` acepta las palabras clave `prev` o `next` , lo que altera la posición de la diapositiva en relación con su posición actual. #### 2) A través de JavaScript Llame al carrusel manualmente con: `$('.carousel').carousel()` ### Opciones Las opciones se pueden pasar a través de atributos de datos o JavaScript. Para los atributos de datos, agregue el nombre de la opción a `data-` , como en `data-interval=""` . Algunas opciones de uso frecuente son: * intervalo * pausa * paseo * envolver ## Detalles adicionales * [Carrusel de botas](https://getbootstrap.com/docs/4.0/components/carousel/)