Componentes de Sliders
Componentes de Sliders listos para copiar: demo en vivo y código fuente. Acceso lifetime en Ui Ux Library.
- DragSlider — Una fila horizontal de tarjetas que se arrastra con el puntero y sigue deslizándose con inercia/momentum al soltar, frenando con fricción. Bucle infinito por ambos lados y deriva lenta en reposo para que el preview cobre vida. Cursor grab/grabbing. Por defecto genera tarjetas de gradiente vivo con etiqueta grande; acepta textos propios vía images. Respeta prefers-reduced-motion mostrando una fila estática. Solo React + CSS + requestAnimationFrame, sin dependencias.
- WheelCarousel — Tarjetas dispuestas sobre una gran rueda tipo noria que gira en bucle y se puede arrastrar; solo se ve el arco inferior y la tarjeta frontal se resalta.
- TiltCarousel — Marquee editorial de tarjetas retrato ligeramente inclinadas (rotación distinta por tarjeta) que se deslizan en horizontal en bucle infinito y sin costura, con sensación de portfolio de moda. Al pasar el ratón, el desplazamiento se ralentiza en lugar de detenerse; bordes difuminados para que las tarjetas entren y salgan de escena. Tarjetas autocontenidas con gradiente vertical vivo y etiqueta, o textos propios vía la prop images. Respeta prefers-reduced-motion mostrando la fila quieta sin desplazamiento. Solo React + CSS, sin dependencias.
- FilmstripGallery — Galería tipo filmstrip: una imagen destacada grande arriba y una tira horizontal de miniaturas debajo. Al avanzar (auto en bucle, flechas o clic en miniatura) la destacada cambia con un crossfade y zoom sutil, la miniatura activa se resalta y la tira se centra en ella con scroll suave. Sin imágenes muestra tarjetas de gradiente vivas etiquetadas. Respeta prefers-reduced-motion (sin animación ni auto-avance). Solo React + CSS, sin dependencias.
- Coverflow — Carrusel 3D estilo coverflow de iTunes: una fila de tarjetas en perspectiva con la central de frente y las laterales rotadas en Y hacia atrás, desplazadas en Z, con reflejo espejado y oscurecimiento progresivo hacia los lados. Avanza en bucle infinito automáticamente y con flechas/teclado. Trae 6 tarjetas de gradiente vivo con etiquetas por defecto; acepta URLs de imágenes reales. Respeta prefers-reduced-motion (sin auto-avance, navegación instantánea). Solo React + CSS 3D, sin dependencias.