componente · @solu30/ui-kit/animation

InfiniteSlider

Cinta que desplaza a sus hijos en loop continuo, con pausa cuando el puntero está encima.

Todavía no la importa ninguno de los 15 verticales medidos.

El componente, montado

Cargando el componente del paquete instalado…

import { InfiniteSlider } from '@solu30/ui-kit/animation'

7 props declaradas en los tipos de la versión instalada.
Prop	Requerida	Tipo	Qué hace
children	sí	`ReactNode`	—
gap	opcional	`number`	Separación entre items, en px. Default `16`.
speed	opcional	`number`	Velocidad en px por segundo. Default `60`.
direction	opcional	`"horizontal" \| "vertical"`	Eje del desplazamiento. Default `"horizontal"`.
reverse	opcional	`boolean`	Invierte el sentido. Default `false`.
pauseOnHover	opcional	`boolean`	Frena la cinta mientras el puntero está encima. Default `true`.
className	opcional	`string`	—

<InfiniteSlider gap={48} speed={40}>
  {logos.map((logo) => <img key={logo.src} {...logo} alt={logo.alt} />)}
</InfiniteSlider>

Del @example del JSDoc de @solu30/ui-kit, sin editar: son 65 de los 541 símbolos. La sangría y los renglones en blanco son los del paquete.