CarrouselColumn 🎠
CarrouselColumn es un componente de carrusel en formato columna diseñado para desplazar elementos de manera vertical, ya sea hacia arriba o hacia abajo, dentro de un contenedor con imagen de fondo. Utiliza animaciones continuas para desplazarse y crear una experiencia visual fluida. Este componente es ideal para presentar listas de elementos con desplazamiento automático.
Características 🔹
Este componente acepta varias propiedades que permiten personalizar la apariencia y el comportamiento del carrusel, tales como la altura de cada elemento, el tiempo de desplazamiento, la dirección del movimiento, y el fondo del carrusel. Estas propiedades opcionales permiten adaptarse a diversas interfaces y necesidades de diseño. La animación se reinicia automáticamente al finalizar, logrando así un efecto de bucle sin fin.
Props 📜
| Prop | Tipo | Descripción |
|---|---|---|
items | React.ReactNode[] | Lista de elementos a renderizar dentro del carrusel. Cada elemento será renderizado en una fila vertical. |
backgroundImg | any | Imagen de fondo del carrusel. Esta imagen se renderiza detrás de los elementos del carrusel. |
width | number | Ancho del contenedor visible del carrusel. Determina el ancho de todos los elementos y el contenedor principal. |
height | number | Altura del contenedor visible del carrusel. Define el área donde los elementos son visibles antes de desplazarse. |
itemHeight | number | Altura de cada elemento en el carrusel. Controla el tamaño de cada elemento dentro de la animación. |
direction | `"up" | "down"` |
Ejemplos de Uso 🎨
Este carrusel se puede utilizar en distintos contextos, como por ejemplo el juego de los elevadores en FIJ03 de la misión 1 en alg_program de metrobot.