# Marquee

> An endless scrolling row of logos, images or templates.

Source: https://ngwr.dev/bits/marquee  
Updated in v15

## Installation

Import the class, and `@use` the entry point in your global styles: without it the component renders unstyled.

```typescript
import { Component } from '@angular/core';
import { WrMarquee } from 'ngwr/bits/marquee';

@Component({ imports: [WrMarquee] })
export class MyComponent {}
```

```scss
@use 'ngwr/bits/marquee';
```

## Playground

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

```angular-ts
import { Component } from '@angular/core';

import { WrMarquee } from 'ngwr/bits/marquee';

/**
 * Playground
 */
@Component({
  selector: 'ngwr-the-angular-ui-library-for-signal-forms-playground-example',
  templateUrl: './ngwr-the-angular-ui-library-for-signal-forms-playground-example.html',
  imports: [WrMarquee],
})
export class NgwrTheAngularUiLibraryForSignalFormsPlaygroundExample {
  // Stubs. The page owned these values; the snippet shows the markup
  // that reads them, not where they come from.
  protected items: any = [];
}
```

## Reduced motion

With `prefers-reduced-motion`, the strip stops and scrolls instead: one copy of the items, no edge fades, and a tab stop on the strip when no item has one. Since v15.

## Types

What `items` accepts.

```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;
  title?: 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` | — |
| `title` | Native tooltip on the image. | `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` | — |
| `title` | Native tooltip on the rendered template. | `string` | — |

## API

| Name | Description | Type | Default |
| --- | --- | --- | --- |
| `items`required | Items to display. Each entry is either an image source or a TemplateRef node. | `readonly WrMarqueeItem[]` | — |
| `speed` | Scroll speed in pixels per second. Negative reverses direction. | `number` | `120` |
| `direction` | Track direction. | `'left' \| 'right'` | `'left'` |
| `itemHeight` | Item height in pixels. | `number` | `28` |
| `gap` | Gap between items in pixels. | `number` | `32` |
| `pauseOnHover` | Pause the loop on hover. | `boolean` | `false` |
| `hoverSpeed` | Custom speed (px/s) when hovered. Overrides `pauseOnHover`. | `number \| undefined` | `undefined` |
| `fadeOut` | Apply edge fade-out gradients. | `boolean` | `false` |
| `fadeOutColor` | CSS colour for the fade-out gradient. Defaults to the page background. | `string` | `''` |
| `scaleOnHover` | Scale individual items up on hover. | `boolean` | `false` |
| `ariaLabel` | Accessible name for the region. Falls back to `marquee.label`, then `'Marquee'`. | `string \| null` | `null` |

## CSS variables

Set these on the component's selector or a wrapper, not on `:root`: the defaults are declared on `ngwr/bits/marquee`'s own element.

| Variable | Default | Declared on |
| --- | --- | --- |
| `--wr-marquee-fade-color-auto` | `var(--wr-color-surface, #ffffff)` | `.wr-marquee` |
| `--wr-marquee-gap` | `32px` | `.wr-marquee` |
| `--wr-marquee-height` | `28px` | `.wr-marquee` |

## See also

- [Carousel](https://ngwr.dev/reference/components/carousel) — Slides with previous and next buttons, dots and optional autoplay.
- [Icon](https://ngwr.dev/reference/components/icon) — Renders an SVG icon you register by name; ngwr ships none of its own.