---
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/)