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.

info 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

Carrusel con cards

Ejemplo:

Carrusel con cards de eventos

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"