# XWUIAnimationBanner

A sliding banner/carousel, the port of Ant Motion's `BannerAnim`. Slides are plain
data - `key`, `content`, optional `background` - and the transition between them is chosen by
`type`, from a simple horizontal slide to overlay and grid reveals.

## When to use

- A marketing hero that rotates through a few messages.
- A small, content-owned carousel where you do not want a slider library's DOM.
- Any rotation that must stop for users who asked for reduced motion: `autoPlay` does not start
  under `prefers-reduced-motion: reduce`, and slide transitions drop to none.

For a gallery of images with zoom and thumbnails, use `XWUIGalleryViewer`; this component is a
banner, not an asset viewer.

## Configuration surface

`data.slides` is an array of `{ key, content, background? }`.

`config`:

- `type` - transition, default `across`. One of `across`, `vertical`, `acrossOverlay`,
  `verticalOverlay`, `grid`, `gridBar`.
- `autoPlay` and `autoPlaySpeed` (default `5000`ms between slides).
- `arrow`, `thumb` - show previous/next arrows and the thumb strip.
- `initShow` - index shown first, default `0`.
- `duration` (default `450`ms), `className`.

Slide content is rendered as text. Non-active slides carry `aria-hidden="true"`.

### Family behaviour

Every component in `power/animation` is CSS plus the Web Animations API - no
`rc-*` React packages and no animation library. Two consequences worth knowing
before you design with them:

- `prefers-reduced-motion: reduce` is honoured, not decorated: presets jump
  straight to their end state, banner autoplay never starts, per-character text
  motion is skipped, and scroll-linked motion freezes. The content is always
  fully readable.
- A `content` string is written with `textContent`, never as HTML. Pass an
  `HTMLElement` when you need markup, and build that element yourself so the
  escaping decision stays where the data is.

## Basic Usage

Each slide carries its own `key`, `content` and `background`, `type: 'across'` picks the transition, and `autoPlay` advances it without interaction.

```example
file: examples/BasicUsage.ts
html: examples/BasicUsage.html
title: Basic Usage
description: An auto-playing banner with per-slide backgrounds.
```

## Showcase

The same rotating banner under its own heading, mounted into a dedicated child host.

```example
file: examples/Showcase.ts
html: examples/Showcase.html
title: Showcase
description: The banner replayed in an isolated host.
```

```api
```