Carrusel Principal


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
info Actualización (02/12/2022): Esta es una nueva sección que incluye el Carrusel principal y los nuevos Carrusel principal con card y Carrusel principal centrado. El componente Carrusel de cards se ha dejado en una sección independiente del Kit.

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

Las imagenes del carrusel principal estan con su punto focal a la derecha, pero este puede ser cambiado añadiendo alguna de estas clases modificadoras:

  • carousel-img--focus-center
  • carousel-img--focus-left

Como alternativa al carrusel principal, se puede utilizar el componente Hero, que consiste en un solo ítem destacado al mismo tiempo.

Carrusel principal

Ejemplo:

Carrusel principal con cards

Carrusel principal con card

Ejemplo:

Carrusel principal centrado

Carrusel principal centrado

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"