Parallax Strip Pagination
Parallax scrolling image strip with thumbnail navigation. Smooth horizontal scrolling with depth effects.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| totalPages | number | 5 | Total number of pages to paginate through. |
| className | string | undefined | Additional CSS classes for custom styling. |
When to Use
Ideal for editorial layouts, travel blogs, and Next.js sites that want a sophisticated, scrolling 'film strip' aesthetic. Use this React component for a parallax-driven image strip with thumbnail-based navigation and depth effects.
Best Practices
Maintain consistent spacing within your design system by using it as a central focus element. Follow React best practices by using horizontal layouts. Optimize performance by lazy-loading images in the hidden segments of the strip.
Why This Component Matters
Horizontal strip layouts provide a unique narrative flow that breaks away from standard vertical scrolling. This production-ready component helpsคุณ build an interface that feels expensive and cinematic, improving user exploration speeds.
FAQ
QHow does the parallax feel?
The images move at a different speed than the thumbnail strip, creating a sense of depth and 3D space during navigation.
QCan I add titles to each strip?
Yes, the current structure can be easily extended to include text overlays on each image for better context and SEO.
QIs it touch-enabled?
The component is optimized for click-based navigation, but supports standard horizontal swipe gestures on touch-enabled mobile devices.
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.