Draggable Carousel
Effortless, infinitely-looping carousel for Framer - supports horizontal & vertical, drag/swipe, autoplay, momentum, and custom cards. Responsive, smooth, ready to use.
Make it with Workshop
Build your own component with AI
Draggable Infinite Carousel is a high-performance, fully-responsive, and endlessly-looping carousel for Framer. Drag, swipe, or autoplay through any card designs - works horizontally and vertically. Optimized for heavy content and the Framer Canvas. Just connect your cards, set direction, and you’re done.
Instructions
Getting started is easy:
Copy and paste the DraggableCarousel component into your Framer project.
Set the component width to “Fill” (when using a horizontal carousel), or set the height to “Fill” (when using a vertical carousel) for best responsive layout.
Connect your cards: Drag your any custom TestimonialCard (or any Frame) to the "Slides" array slot.
Set the direction: Choose “horizontal” or “vertical” in the properties panel.
Customize: Adjust spacing, initial offset, drag sensitivity, and more to suit your design.
Enable Autoplay: Turn on autoplay and set speed/direction if you want automatic scrolling.
Advanced: Use clipping fade for fancy edge-fade effects.
Preview your carousel - Enjoy seamless, infinite scrolling and full drag/scroll in preview.
How it Works (Property Controls Overview)
Slides: Connect any Frame or component to the array, these become your carousel items.
Scroll Direction: Switch between horizontal and vertical layout 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.
Scroll with Wheel: Enable mouse/touchpad scrolling.
Momentum Friction: Adjust how “glidey” or “snappy” the inertia feels after drag.
Drag Sensitivity: Tune how fast the carousel reacts to drags.
Autoplay: Toggle infinite auto-looping, and adjust speed and direction.
Fade Clipping: Add a soft fade to the edges (great for UI polish).
Features
Truly Infinite Looping: No end! Carousel loops endlessly in either direction.
Horizontal & Vertical: Switch direction instantly in settings.
Drag & Swipe: Touch and pointer support with smooth momentum.
Autoplay: Automatic looping, with speed and direction controls.
Responsive: Fits any container, adapts to your layout and cards.
Performance Optimized: Editor (Canvas) mode is ultra-fast, even with heavy content.
Edge Fade: Optional edge-fade effect for polished UIs.
Fully Customizable: Every aspect (spacing, alignment, sensitivity, animation) is tunable.
Works with Any Card: Drop in testimonials, products, images - your design, your way.
Plug & Play: Zero-code, ready in seconds.
Made with ❤️ by Nitso
