Slider
Disponible
Contenedor de desplazamiento horizontal que permite navegar el contenido mediante arrastre con el mouse o interacción táctil, optimizado mediante tokens de Nave.
Promo 1
Beneficio exclusivo de temporada.
Ver
Promo 2
Plan de cuotas y descuentos especiales.
Ver
Promo 3
Nuevas oportunidades para tu comercio.
Ver
Drag · Snap · Touch
Import
Importa los estilos base y el componente DragSlider.
TypeScript
1import 'nave-ui-library/styles.css'2import { DragSlider } from 'nave-ui-library/react'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 DragSlider.
| 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": "DragSlider",3 "description": "Componente de carrusel o slider con soporte para desplazamiento mediante arrastre (drag) y scroll fluido.",4 "component": "DragSlider",5 "files": [6 "components/base/data-display/cards-blocks/DragSlider.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 "freeScroll": {18 "type": "boolean",19 "default": true,20 "description": "Permite el desplazamiento libre sin ajustar a puntos de anclaje (snapping)."21 },22 "showArrows": {23 "type": "boolean",24 "default": false,25 "description": "Muestra u oculta flechas de navegación laterales."26 }27 }28}