## Carousel Presentar una serie de imágenes o textos en un espacio limitado ### Uso básico ::: demo Combina `el-carousel` con `el-carousel-item`, para conseguir el carrusel. El contenido de cada diapositiva es completamente personalizable, y sólo tiene que colocarla dentro de la etiqueta `el-carousel-item` . Por defecto, el carrusel cambia cuando el ratón pasa por encima de un indicador. Fije `trigger` para `click`, si lo que se desea es que el carrusel cambie sólo cuando se haga clic en un indicador. ```html ``` ::: ### Indicadores Los indicadores de paginacion pueden mostrarse fuera del carrusel ::: demo El atributo `indicator-position` determina dónde se encuentran los indicadores de paginación. Por defecto están dentro del carrusel, y el ajuste de `indicator-position` a `outside` los mueve hacia fuera; en cambio `indicator-position` a `none` los oculta. ```html ``` ::: ### Flechas Puede definir cuando se visualizan las flechas ::: demo El atributo `arrow` determina cuándo se visualizan las flechas. Por defecto aparecen cuando el ratón se desplaza sobre el carrusel. Ajuste `arrow` a `always` o `never` para mostrar u ocultar las flechas permanentemente. ```html ``` ::: ### Modo Card Cuando una página es suficientemente ancha pero tiene una altura limitada, puede activar el modo `card` para carrusel. ::: demo Ajuste `type` a `card` para activar el modo tarjeta. Aparte de la apariencia, la mayor diferencia entre el modo tarjeta y el modo común es que al hacer clic en las diapositivas de ambos lados, el carrusel cambia directamente en modo tarjeta. ```html ``` ::: ### Atributos de Carousel | Atributo | Descripcion | Tipo | Valores aceptados | Por Defecto | | ------------------ | ---------------------------------------- | ------- | ------------------ | ----------- | | height | Alto del carrusel | string | — | — | | initial-index | Indice del slider inicial activo (empieza desde 0) | number | — | 0 | | trigger | Evento que muestra los indicadores | string | hover/click | hover | | autoplay | Si se enlazan automáticamente las diapositivas | boolean | — | true | | interval | Intervalo del auto loop, en milisegundos | number | — | 3000 | | indicator-position | Posición del indicador de paginación | string | outside/none | — | | arrow | Cuando se muestran las flechas | string | always/hover/never | hover | | type | Tipo de carrusel | string | card | — | ### Eventos de Carousel | Nombre evento | Descripción | Parametros | | ------------- | ---------------------------------------- | ---------------------------------------- | | change | Se dispara cuando el slider activo cambia | Indice del nuevo slider activo, indice del anterior slider activo. | ### Metodos de Carousel | Metodos | Descripción | Parametros | | ------------- | -------------------------- | ---------------------------------------- | | setActiveItem | Cambio manual de slider | indice del slider al que se va a cambiar, empezando por 0; o el `name` del `el-carousel-item` correspondiente | | prev | Cambia al slider anterior | — | | next | Cambia al slider siguiente | — | ### Atributos de Carousel-Item | Atributo | Descripción | Tipo | Valores aceptados | Por Defecto | | -------- | ---------------------------------------- | ------ | ----------------- | ----------- | | name | Nombre del item que puede ser usado en `setActiveItem` | string | — | — | | label | Texto que se mostrara en el indicador de paginacion correspondiente | string | — | — |