Uilora Swipe
Swipe card pagination with spring animations, gradient overlays, and dot indicators.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| pages | Array<{title, description, image}> | 5 Uilora pages | Page items with title, description, and image URL. |
| accentColor | string | #5227FF | Accent color for active dot indicator. |
| autoPlay | boolean | false | Enable auto-play slideshow. |
| className | string | "" | Additional CSS classes. |
When to Use
Great for hero sliders, product showcases, and portfolio galleries that need smooth card-style pagination with spring physics.
Best Practices
Use high-quality landscape images. Keep titles short for clean overlay text. 4-6 pages works best for engagement.
Why This Component Matters
Spring-physics card transitions create a premium, app-like feel that elevates standard image carousels into interactive experiences.
FAQ
QDoes it support swipe gestures?
Yes, you can extend it with framer-motion drag gestures for touch-based swiping.
QCan I autoplay?
The autoPlay prop enables automatic page cycling at a set interval.
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.