Stop settling for flat, uninspired carousels. The Overlapping Card Slider is a premium Framer component engineered to bring life, depth, and fluid interaction to your next web project. Whether you are designing a high-converting SaaS landing page, an immersive portfolio, or a trust-building testimonial section, this interactive 3D slider instantly elevates the perceived value of your site with zero coding required.
Your designs. Our physics. (NEW) We’ve just introduced Component Mode, meaning you are no longer limited to our built-in layouts. Design absolutely anything in Framer—pricing cards, interactive feature highlights, or team profiles—and connect them to the slider. Our custom engine automatically applies high-end, native-app drag physics and 3D overlap math to your custom creations.
Total control right inside the Framer canvas. You don’t need to touch a single line of React. Every visual element has been exposed to Framer’s property panel. Tweak the drag elasticity, adjust the 3D depth scale, enable clickable elements inside your cards, or use our built-in "Default Mode" for lightning-fast, plug-and-play testimonial cards with granular typography and avatar controls.
NEW - Limitless Component Mode: Turn any custom Framer component into a 3D slider. Design your own cards, link them up, and watch the physics take over.
Dynamic 3D Overlap Physics: Cards smoothly scale, rotate, and fade into the background as they are pushed back, creating a stunning depth-of-field effect.
Fluid Momentum Drag: Powered by Framer Motion, the swipe interactions feature highly configurable elasticity, momentum, and spring-based snapping for a natural, satisfying feel.
Interactive Custom Cards: Enable pointer events inside the slider so your users can click buttons, open links, or trigger micro-interactions inside your custom components.
Plug-and-Play Testimonials: Need something fast? Use the built-in Default Mode for instant social proof. Includes full support for User Avatars, Names, Roles, and stylized Quote icons.
Granular Typography & Theming: Fully customize the fonts, weights, and colors. Switch between "Universal" styling for a clean, uniform look, or "Per-Card" mode for multi-colored editorial layouts.
Smart Navigation Buttons: Fully customizable "Next" and "Previous" arrow controls. Adjust the icon style, button radius, colors, and spatial distribution to match your brand.
Responsive & Auto-Sizing: Automatically detects your custom component dimensions and calculates track constraints to ensure flawless rendering across desktop, tablet, and mobile breakpoints.
Zero Code Required: 100% integrated into Framer’s native visual interface. Drag, drop, link, and publish.
Perfect for: Testimonial showcases, interactive feature explorers, team member galleries, immersive portfolio carousels, pricing tiers, and premium SaaS landing pages.
Imesh Dilshan
