# Marquee

> Endless rAF-driven horizontal carousel. Pass items as image sources or Angular templates; the track auto-duplicates to cover the container. Optional edge fades, pause/scale-on-hover, custom hover speed.

Source: https://ngwr.dev/animations/marquee  
Kind: Animation

## Import

```angular-ts
import { WrMarquee } from 'ngwr/marquee';
```

## Playground

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

## Types

Entry shapes accepted by [items].

```angular-ts
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` | — |

## API

| 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'` |