Zoom Slider

Overview

Zoom Slider creates a controlled visual sequence: the active slide moves forward with depth.

Use it for equal-weight images, portfolio work, campaign visuals, or product shots where browsing is the point. If users must compare everything, read everything, or convert from every item, use a grid instead.

The risk in production is hiding important content. Keep controls visible, support keyboard and swipe, announce meaningful slide changes politely, and pause autoplay when the visitor interacts.

Install

Usage

Component Code

Example Production Use Case

Use this as carousel-pattern implementation guidance. Verify the shipped controls, swipe behavior, keyboard model, autoplay/pause behavior, focus management, aria-live announcements, and fallback layout before relying on exact props, defaults, imports, or installation steps.

Best Used For

• Product and project showcases where the active image should step forward with controlled depth.
• Visual browsing sections where comparison is optional and controls stay obvious.
• Zoom Slider supports visual browsing when a grid would feel flat and comparison is not the priority.

Not For

Not for critical proof, pricing, feature comparisons, or content users must see to convert.

Performance Budget

Optimize images, lazy-load offscreen slides carefully, and pause autoplay when inactive or offscreen.

Accessibility and Mobile

Use visible controls, keyboard navigation, swipe, and aria-live="polite" for meaningful slide changes. Mobile controls must remain reachable.

Common Mistakes

• Using Zoom Slider to hide critical conversion content.
• Autoplaying without pause controls.
• Skipping keyboard and swipe support.