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
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. 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.
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.
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.
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.
Please note: This is a draggable carousel, which means it captures all mouse and touch interactions to provide smooth drag functionality. As a result, click events, hover effects, and links on individual cards will not work as they interfere with the drag mechanics.
This is a technical limitation that affects all draggable carousels - you can either have:
A draggable carousel (where drag works perfectly)
OR clickable/hoverable cards (where interactions work perfectly)
But not both simultaneously
Alternative: If you need clickable cards with links, consider using a non-draggable ticker component with navigation arrows instead.
Made with ❤️ by Soyeb
Have questions or need a custom Framer component? Reach out at creator.nitso@gmail.com
