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.

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.

Actualización (21/10/2022): Por motivos de SEO se ha reemplazado la propiedad css background-image por un tag <img /> con clase .carousel-img en todos los carruseles

Carrusel con cards

Ejemplo:

Cargando ...

Carrusel con cards de eventos

Ejemplo:

Cargando ...

Carrusel con cards featured

Ejemplo:

Cargando ...

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"