Draggable Infinite Carousel is a high-performance, fully responsive, and endlessly looping carousel for Framer. Designed as a versatile draggable component, it lets you drag, swipe, or enable autoplay to scroll through any card design. Whether you need a horizontal carousel or a vertical carousel, it adapts instantly. Optimized for heavy content inside the Framer Canvas, this responsive carousel ensures smooth, fast performance.
Just connect your cards, set direction, and you’re done. From an image carousel to a testimonial carousel, a product carousel, or a fully custom carousel, this component gives you flexibility without complexity.
Unlike many carousel components that force you into predefined image or video placeholders, this one gives you full design freedom.
You design your cards directly on the Framer canvas with hover states, buttons, links, badges, or any custom layout, then simply connect those frames to the carousel. That’s it.
There are:
No locked templates
No predefined media slots
No content restrictions
Because the items are real Framer layers, this works beautifully as a product carousel, portfolio carousel, team carousel, or logo carousel - fully customized to your design system.
Copy and paste the DraggableCarousel component into your Framer project.
Set the component width to “Fill” (for a horizontal carousel), or height to “Fill” (for a vertical carousel) for the best responsive carousel layout.
Connect your cards: Drag any custom TestimonialCard (or any Frame) to the "Slides" array slot. This is perfect for building a testimonial carousel, product carousel, or image carousel.
Set the direction: Choose “horizontal” or “vertical” in the properties panel.
Customize: Adjust spacing, initial offset, drag sensitivity, and more to suit your design. You can also create a drag and swipe carousel with ease.
Enable Autoplay: Turn on the autoplay carousel feature and set speed/direction if you want automatic scrolling.
Advanced: Use clipping fade for fancy edge fade carousel effects.
Preview your carousel: Enjoy seamless, infinite loop carousel scrolling and full drag/scroll in preview.
Slides: Connect any Frame or component to the array; these become your carousel items. Perfect for building a scrollable carousel of mixed content.
Scroll Direction: Switch between horizontal carousel and vertical carousel instantly.
Spacing: Set the pixel gap between cards.
Initial Offset: (If autoplay is off) Set where the carousel starts (useful for centering a card).
Align: Control card alignment within the container.
Sizing Options: Control how cards adapt to the carousel container. Set Width to Auto to preserve the original slide width, or Stretch to fill the carousel's full width. Similarly, Height can be set to Auto (maintains original height) or Stretch (fills container height). Perfect for creating fluid responsive carousels or fixed-size card layouts.
Scroll with Wheel: Enable mouse/touchpad navigation for a true interactive carousel experience.
Wheel Speed: Fine-tune how fast the mouse wheel and trackpad scroll the carousel.
Momentum Friction: Adjust how “glidey” or “snappy” the inertia feels after drag, giving you control over a momentum carousel feel.
Drag Sensitivity: Tune how fast the carousel reacts to drags.
Mobile Drag: Enable Drag on Mobile or not.
Autoplay: Toggle infinite auto-looping with the autoplay carousel setting, and adjust speed and direction.
Fade Clipping: Add a soft fade to the edges for a polished edge fade carousel effect.
Truly Infinite Loop Carousel: No end! Carousel loops endlessly in either direction.
Horizontal Carousel & Vertical Carousel: Switch orientation instantly in settings.
Drag & Swipe Carousel: Full touch and pointer support with smooth momentum carousel effects.
Links & Hover Effects Work: Cards fully support hover animations and clickable links - drag and interactions coexist seamlessly. Just drag to scroll, tap to click.
Autoplay Carousel: Automatic looping, with speed and direction controls.
Responsive Carousel: Fits any container, adapts to your layout and cards.
Performance Optimized: Editor (Canvas) mode is ultra-fast, even with heavy content. Smooth 60fps via direct DOM RAF - zero re-renders during scroll.
Edge Fade Carousel: Optional edge-fade effect for polished UIs.
Fully Customizable Carousel: Every aspect (spacing, alignment, sensitivity, animation) is tunable.
Works with Any Card: Drop in testimonial carousel, product carousel, or image carousel items – your design, your way.
Slider Functionality: Use it as a classic slider or as a modern interactive carousel.
Plug & Play: Zero-code, ready in seconds.
Links & Hover Now Work Fully: Cards now fully support hover animations and clickable links - drag and click finally coexist. A short tap opens the link, a longer swipe scrolls the carousel. No more choosing between interactivity and drag.
Smoother Wheel & Trackpad Scrolling: Scrolling with a mouse wheel or trackpad feels noticeably more natural and fluid.
Wheel Speed: A new property lets you change speed of wheel scrolling from the properties panel.
Buttery 60fps Scrolling: The entire scroll engine was rebuilt from scratch for maximum smoothness. No stutters, no jank - just silky motion at all times.
Tab Switch Fix: Switching browser tabs and coming back no longer causes the carousel to suddenly jump or flash. It picks up exactly where it left off.
Height & Width Stretch Fixed: The Stretch sizing option now reliably fills the carousel container in both height and width, no matter the layout.
Mobile Page Scroll Fixed: On mobile, the page can now scroll vertically while the carousel handles horizontal drag - they no longer conflict. Swipe sideways to drag the carousel, swipe up/down to scroll the page, just as expected.
Made with ❤️ by Soyeb
Refund Policy: Due to the digital nature of these components, all sales are final, and once delivered they cannot be returned or refunded. Please review product details and demos before purchasing, and feel free to reach out if anything is unclear.
If you have any questions, need a custom Framer component, want clarification, or run into any issues, you can always reach me out at creator.nitso@gmail.com. I’m here to help.
Soyeb
