Carrusel


El carrusel se inicia con el atributo data-carousel en el elemento .uc-carousel, siendo el valor de data-carousel, la clase del elemento hijo donde irá el contenido.

Carrusel de encabezado

Es el carrusel principal del sitio. Por lo tanto, debe usarse utilizarse solo una vez en el sitio, en la página de inicio, debajo del header. El estilo y comportamiento de este carrusel no debe ser modificado, pero sí se puede modificar el tipo de información que se incluye (por ejemplo, podría quitarse el Tag UC).

Carrusel principal

Ejemplo:

Carrusel de cards

Este tipo de componentes se puede utilizar de acuerdo a la necesidad y requerimiento del proyecto y, a diferencia del carrusel principal, se puede utilizar más de una vez en un sitio, tanto en la página de inicio como en las páginas interiores. Del mismo modo, este carrusel puede utilizarse para despegar distintos tipos de Cards, Cards de eventos y Cards de citas.

Carrusel con cards

Ejemplo:

Carrusel con cards de eventos

Ejemplo:

Carrusel con cards featured

Ejemplo:

Atributo Valor posible
data-type Tipo de contenido, 'cards' o 'carousel'
Default: carousel
data-sm-items Cantidad de ítems a mostrar en pantallas desde 768px.
Default: 1
data-items Cantidad de ítems a mostrar en pantallas desde 992px.
Default: 1
data-slideby Cantidad de ítems a deslizar por cada transición.
Default: 1
data-loop Hace que el carrusel se repita al llegar al último slide.
Booleano. Default: false
data-nav Declara la existencia de botones de navegación.
Booleano. Default: false
data-autoplay Inicia las transiciones automáticamente.
Booleano. Default: false
data-controls Declara la existencia de botones de control (Anterior, Siguiente).
Booleano. Default: false
data-navcontainer Selector CSS del contenedor de los botones de navegación. (Debe tener la misma cantidad de hijos directos que la cantidad de slides)
data-autoplaybutton Selector CSS del botón "Play"
data-speed Velocidad de transición entre Slides (en ms)
Default: 300
data-gutter Espaciado (gutter) entre elementos cuando se seleccionó el type: cards
Default: 10
data-gutter Espaciado (gutter) entre elementos cuando se seleccionó el type: cards
Default: 10
data-prev-button Selector CSS del botón "Anterior"
data-next-button Selector CSS del botón "Siguiente"