codeNoirMD
menuDocumentationexpand_more

Getting Started

Syntax

Directives

Styling

Reference

smart_toyLLM Reference

Slide — Carousel de Texto

Carousel de texto con animación slide-up. Cada línea se parsea independientemente.

Props

PropTipoDefaultDescripción
classstring''Clases Tailwind para contenedor
stylestring—CSS inline
intervalstring'3000'Milisegundos entre rotaciones
speedstring''500''Duración de transición en ms

Parsing por Línea

Cada línea no vacía se parsea independientemente via context.parseMarkdown(). Esto significa que cada slide soporta headers, formato inline, y hasta directivas anidadas.

Height Dinámico

El componente mide TODOS los elementos de slide y usa la altura máxima como altura fija del contenedor. Esto previene saltos de layout durante la rotación.

Forcing de Text Size

Cuando incluyes una clase text-* en class, se extrae y se aplica como font-size !important via un tag <style> inline:

¿Por qué? Tailwind JIT no puede ver clases construidas dinámicamente, así que el font-size forzado asegura sizing consistente en todos los slides.

Limitación: Solo detecta un único text-* class. El font-size se aplica a todos los hijos via selector .{scopeClass} *.

Rendering

  • Contenedor overflow-hidden con altura fija
  • Inner div posicionado absolute con transición slide-up
  • Cada slide verticalmente centrado (display: flex; align-items: center)
  • Easing: cubic-bezier(0.16, 1, 0.3, 1)

Limitaciones

  • Cada línea se parsea independientemente — NO funcionan constructos multi-línea (tablas, listas, code blocks, directivas)
  • Si solo hay 1 línea, no hay rotación — se muestra estáticamente
  • Líneas vacías se filtran — no hay slides de "pausa"
  • Contenido largo en slides dificulta la legibilidad
  • speed muy rápido (< 200ms) se siente brusco
  • Contenido crítico no debe estar SOLO en slides