Parallax Slider

Infinite Parallax Slider is a high-performance horizontal slider built for immersive, motion-first Framer websites. It combines smooth mouse drag, touch swipe, and scroll-wheel control with a seamless infinite loop and real-time parallax image movement.

Each slide reacts naturally to user input using velocity-based motion and lerp smoothing, creating a fluid, premium browsing experience. Images subtly shift based on their position in the viewport, adding depth and visual interest without overwhelming the layout.

Hover interactions reveal clean title overlays and directional cues, while click handling intelligently distinguishes between dragging and intentional clicks. Fully responsive and optimized for performance, this component is ideal for modern portfolios, product showcases, and editorial-style layouts.

Key Features

• Infinite horizontal looping with seamless slide recycling

• Mouse drag, touch swipe, and scroll-wheel interaction

• Smooth lerp-based motion with velocity control

• Real-time parallax image movement based on viewport position

• Hover-activated title overlay with animated transition

• Smart click handling to prevent accidental clicks while dragging

• Fully customizable slide size, spacing, colors, and motion values

• Dynamic slide data binding with images, titles, and URLs

• Optimized for performance using requestAnimationFrame

• Fully compatible with Framer property controls

Best For

• Portfolio project showcases

• Agency and studio websites

• Product or case study sliders

• Editorial and magazine-style layouts

• Visual storytelling sections

• Interactive hero or feature sections

Where to Use

• Homepage featured work sections

• Portfolio galleries

• Product highlights

• Campaign or launch pages

• Brand storytelling layouts

• Experimental or motion-driven designs

How to Use

• Drag the component onto the canvas

• Add or remove slides using the Slides property

• Upload images, set titles, and assign URLs

• Adjust slide width, height, and spacing to fit your layout

• Tune scroll speed, smoothness, and max velocity for desired motion feel

• Control parallax intensity and image scale for depth

• Customize colors and typography to match your brand

• Enable or disable click behavior as needed