Carousel
Disponible
El Carousel es un componente que permite presentar un conjunto de tarjetas de forma secuencial dentro de un espacio acotado. El usuario puede navegar entre los ítems mediante controles de paginación o indicadores de posición, explorando el contenido sin abandonar la pantalla actual.
10% OFF para clientes Galicia
9 cuotas sin interés para todas tus ventas
12 cuotas sin interés para todas tus ventas
Drag · Snap · Touch
Import
Importa los estilos base y el componente Carousel.
TypeScript
1import 'nave-ui-library/styles.css'2import { Carousel } from 'nave-ui-library/react'Cards Slider
Carrusel Para mostrar un conjunto de ítems relacionados entre sí (productos, beneficios, medios de cobro).
10% OFF para clientes Galicia
9 cuotas sin interés para todas tus ventas
12 cuotas sin interés para todas tus ventas
Banner Slider
Carrusel de promociones con snap-start automático y espaciado vía --ds-gap.
Promoción de Verano
Descuentos para activar ventas en temporada.
Ver
Descuentos en Tecnología
Equipamiento con beneficios especiales.
Ver
Viajes y Turismo
Promociones pensadas para rubro servicios.
Ver
Nueva Colección
Lanzamientos con alto impacto comercial.
Ver
Cards Horizontal Layout
Múltiples tarjetas de información en desplazamiento horizontal.
Card #1
Contenido de la tarjeta número 1 deslizable mediante el motor de fricción de Nave.
Card #2
Contenido de la tarjeta número 2 deslizable mediante el motor de fricción de Nave.
Card #3
Contenido de la tarjeta número 3 deslizable mediante el motor de fricción de Nave.
Card #4
Contenido de la tarjeta número 4 deslizable mediante el motor de fricción de Nave.
Card #5
Contenido de la tarjeta número 5 deslizable mediante el motor de fricción de Nave.
Interactive Behavior
Detalles sobre el comportamiento interactivo del slider.
- Cursor Inteligente: Cambia entre estados
grabygrabbingusando variables CSS. - Snap Scroll: Alineación magnética basada en el estándar CSS Scroll Snap.
- Optimización Visual: Oculta barras de desplazamiento nativas manteniendo la funcionalidad táctil.
API Reference
Todas las props disponibles para el componente Carousel.
| Prop | Type | Default | Description |
|---|---|---|---|
childrenreq | ReactNode | — | Elementos hijos que se renderizan dentro del slider. |
className | string | — | Clases CSS adicionales para el contenedor. |
tokens | Partial<ThemeTokensBase> | — | Override local de tema/tokens. |
Registry
Ver configuración técnica del registro
JSON
1{2 "name": "Carousel",3 "description": "Componente de carrusel o slider con soporte para desplazamiento mediante arrastre (drag) y scroll fluido.",4 "component": "Carousel",5 "files": [6 "components/base/data-display/cards-blocks/carousel/Carousel.tsx"7 ],8 "dependencies": [9 "react"10 ],11 "props": {12 "children": {13 "type": "ReactNode",14 "required": true,15 "description": "Elementos que se deslizarán dentro del contenedor."16 },17 "className": {18 "type": "string",19 "description": "Permite asignar clases css personalizadas."20 },21 "tokens": {22 "type": "json",23 "description": "Tokens personalizados para el merchant."24 }25 }26}JSON
1{2 "name": "Carousel Card",3 "description": "Card que se muentra dentro del Carousel.",4 "component": "Carousel.Card",5 "files": [6 "components/base/data-display/cards-blocks/carousel/CarouselCard.tsx"7 ],8 "dependencies": [9 "react"10 ],11 "props": {12 "title": {13 "type": "string",14 "required": true,15 "description": "Titulo que se muestra en la card."16 },17 "imgSrc": {18 "type": "string",19 "required": true,20 "description": "URL image."21 },22 "imgAlt": {23 "type": "string",24 "required": true,25 "description": "ALT image."26 },27 "className": {28 "type": "string",29 "description": "Permite asignar clases css personalizadas."30 },31 "tokens": {32 "type": "json",33 "description": "Tokens personalizados para el merchant."34 }35 }36}