Marquee

A seamless infinite scroll of items.

AcmeGlobexInitechUmbrellaSoylent

import { BuiMarquee } from 'ng-blatui';

<bui-marquee [items]="['Acme', 'Globex', 'Initech', 'Umbrella']" />

Reverse

ReactVueSvelteAngularSolid

<bui-marquee direction="right" [items]="[…]" />

Hovertopausethescroll

<bui-marquee [pauseOnHover]="true" [items]="[…]" />

Prop	Type	Default	Description
`items`	`readonly string[]`	`[]`	Items rendered in sequence and scrolled seamlessly.
`direction`	`"down" \| "left" \| "right" \| "up"`	`'left'`	Scroll direction; `up`/`down` switch the marquee to a vertical track.
`duration`	`string`	`'40s'`	Time for one full loop, as a CSS duration (e.g. `40s`).
`gap`	`string`	`'1rem'`	Spacing between items, as a CSS length.
`pauseOnHover`	`boolean`	`true`	Whether hovering pauses the scroll animation.

Every ng-blatui component also accepts a class input to merge extra Tailwind classes onto the host.