Lazy Slide Windowing

ProNew

Use this when slides are heavy (large images, embeds, charts): only the selected slide and its neighbours are rendered, the rest are same-size placeholders, so a long carousel stays light and still scrolls smoothly.

Customize

Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.

label

radius1

Guide and examples

When to use it

Use it for carousels of ten or more slides where each one loads real weight, such as photos, maps or video embeds.

Do not use it for a few light slides. The placeholders add a flash for nothing, and screen reader users lose nothing but you gain no speed.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Default	Description
`slides`	`LazySlide[]`	`-`	Each has an id, label and a render function that returns the heavy content.
`label`	`string`	`-`	Accessible name of the carousel.
`radius`	`number`	`1`	How many slides either side of the selected one are rendered.

Accessibility

Placeholders are aria-hidden and the same size as real slides, so nothing shifts when content arrives.
The window wraps around the ends with the loop, so Next from the last slide finds its content ready.
The pulse on placeholders is off with prefers-reduced-motion.
Keyboard: Left / Right: previous or next slide

Testing

The pattern ships with a Testing Library test (lazy-slide-windowing.test.tsx). Embla needs layout to count snaps, and jsdom has none, so the repo's mockCarouselLayout helper gives the viewport and slides real sizes.