Marquee

Angular adaptation of an effect by David Haz / reactbits.dev.

import { WrMarquee } from 'ngwr/marquee';

<wr-marquee
  [items]="items"
  [speed]="120"
  [gap]="48"
  [itemHeight]="36"
  direction="left"
  [pauseOnHover]="false"
  [fadeOut]="true"
/>

Customize

Speed (px/s)

120

Gap (px)

48 px

Item Height (px)

36 px

Direction

Pause on Hover

Fade Out

type WrMarqueeItem = WrMarqueeImage | WrMarqueeNode;

interface WrMarqueeImage {
  src: string;
  alt?: string;
  href?: string;
  title?: string;
  width?: number;
  height?: number;
  srcSet?: string;
  sizes?: string;
}

interface WrMarqueeNode {
  node: TemplateRef<unknown>;
  href?: string;
  ariaLabel?: string;
}

Name	Description	Type	Default
`WrMarqueeItem`	Union of the two entry kinds below.	`WrMarqueeImage \| WrMarqueeNode`	—
`WrMarqueeImage`	Image-driven entry.	`interface`	—
`src`required	Image URL.	`string`	—
`alt`	Alt text.	`string`	—
`href`	Wraps the image in a link.	`string`	—
`width / height`	Intrinsic size hints.	`number`	—
`srcSet / sizes`	Responsive image attributes.	`string`	—
`WrMarqueeNode`	Template-driven entry.	`interface`	—
`node`required	Template rendered as the item.	`TemplateRef<unknown>`	—
`href`	Wraps the template in a link.	`string`	—
`ariaLabel`	Accessible label for the link.	`string`	—

Name	Description	Type	Default
`items`required	Items to display (images or template nodes).	`WrMarqueeItem[]`	`— (required)`
`speed`	Scroll speed in px/s. Negative reverses direction.	`number`	`120`
`direction`	Track direction.	`'left' \| 'right'`	`'left'`
`itemHeight`	Item height in px.	`number`	`28`
`gap`	Gap between items in px.	`number`	`32`
`pauseOnHover`	Pause the loop on hover.	`boolean`	`false`
`hoverSpeed`	Custom speed when hovered. Overrides `pauseOnHover`.	`number`	`—`
`fadeOut`	Apply edge fade-out gradients.	`boolean`	`false`
`fadeOutColor`	Fade-out gradient colour. Defaults to the lib surface colour (`--wr-color-white`).	`string`	`—`
`scaleOnHover`	Scale individual items up on hover.	`boolean`	`false`
`ariaLabel`	Accessible label for the carousel region.	`string`	`'Marquee'`

Import

Playground

Customize

Types

API