Draggable Carousel

Draggable Infinite Carousel

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.

Getting started is easy:

1. Copy and paste the DraggableCarousel component into your Framer project.

2. Set the component width to “Fill” (for a horizontal carousel), or height to “Fill” (for a vertical carousel) for the best responsive carousel layout.

3. 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.

4. Set the direction: Choose “horizontal” or “vertical” in the properties panel.

5. Customize: Adjust spacing, initial offset, drag sensitivity, and more to suit your design. You can also create a drag and swipe carousel with ease.

6. Enable Autoplay: Turn on the autoplay carousel feature and set speed/direction if you want automatic scrolling.

7. Advanced: Use clipping fade for fancy edge fade carousel effects.

8. Preview your carousel: Enjoy seamless, infinite loop carousel 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. 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.

• Scroll with Wheel: Enable mouse/touchpad navigation for a true interactive carousel experience.

• 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.

• 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.

Features

• 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.

• 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.

• 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.

Properties Control Panel

Made with ❤️ by Nitso

Have questions or need a custom Framer component? Reach out at creator.nitso@gmail.com