Uilora Fade
Crossfade gallery pagination with thumbnail previews and editorial counter.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| pages | Array<{title, image}> | 5 aesthetic pages | Page items with title and image URL. |
| accentColor | string | #000000 | Accent color for active thumbnail border. |
| showThumbnails | boolean | true | Show thumbnail strip below main image. |
| className | string | "" | Additional CSS classes. |
When to Use
Perfect for portfolio lookbooks, photography galleries, and editorial content where smooth crossfade transitions and thumbnail navigation enhance the viewing experience.
Best Practices
Use consistent aspect ratio images for the best thumbnail strip appearance. 4-8 pages provide good navigation density.
Why This Component Matters
Crossfade transitions feel elegant and intentional compared to sliding. The thumbnail strip provides at-a-glance navigation that improves usability.
FAQ
QCan I hide thumbnails?
Yes, set showThumbnails to false for a cleaner layout with only arrow navigation.
QDoes it support keyboard navigation?
You can extend it with keyboard event listeners for arrow key navigation.
Related Components
Uilora Dynamic
Interactive tiered pricing calculator with seat slider, billing toggle, and real-time cost breakdown.
Uilora Cloud Slider
Dark navy 3-plan cloud pricing with per-card sliders, add-on checkboxes, and live price calculation.
Uilora Matrix
Feature comparison matrix with 3 plans, monthly/yearly toggle, Pro spotlight, check/cross icons.