Carruseles React

Componentes de carrusel disponibles en el Kit Digital USS


1import {
2  CarouselHero,
3  CarouselCards,
4  CarouselContent,
5} from "@ussebastian/kitdigital-react/dist/uss-react.es.js";

El Kit Digital USS ofrece tres tipos diferentes de carruseles, cada uno diseñado para un propósito específico:

1. Carousel Hero

El CarouselHero está diseñado para secciones principales o destacadas, típicamente en la parte superior de una página. Es ideal para mostrar contenido importante con imágenes de fondo a pantalla completa.

Características

Imágenes a pantalla completa con overlay
Contenido superpuesto con alto contraste
Navegación con flechas y/o puntos
Soporte para contenido personalizado

Componentes

CarouselHero: Contenedor principal
CarouselHeroItem: Elementos individuales del carrusel

Props de CarouselHeroItem

Prop	Tipo	default	Descripción
image	JSX	-	tag img del item del carrusel hero
content	JSX	-	Contenido del item del carrusel hero

Ejemplos

1Cargando...

2. Carousel Cards

El CarouselCards está optimizado para mostrar múltiples tarjetas o elementos en un formato deslizable. Perfecto para mostrar productos, servicios o cualquier conjunto de elementos similares.

Características

Múltiples items visibles simultáneamente
Navegación suave entre elementos
Responsive design (ajusta items visibles según el viewport)
Soporte para títulos de sección

Props

Prop	Tipo	default	Descripción
visibleItems	number	3	Cantidad de items visibles en el carrusel en desktop
title	string	-	Título del carrusel

Ejemplos

1Cargando...

Contenido