Card Stack Carousel
Swipeable or tappable card stack carousel for Framer. Connect your own cards(frames), set swipe sensitivity, and customize animation, spacing, and auto-cycle easily.
Make it with Workshop
Build your own component with AI
Card Stack Carousel is a swipeable and tappable interactive card stack built for Framer. This card stack carousel lets you showcase cards in a dynamic slideshow format, supporting gestures like swipe, drag, and tap. Perfect for onboarding flows, galleries, and feature highlights, it combines a sleek animated card stack with full customization options and smooth performance. Whether you need a swipe card carousel, a draggable card carousel, or a no code card carousel, this component adapts instantly to your design.
Instructions
Copy and paste the CardStackCarousel component into your Framer project.
Use the Cards control to connect your own card designs – drag any frame or component in as a card.
Adjust properties in the right-hand panel to customize stack spacing, scaling, swipe sensitivity, animation speed, and gesture method (swipe or tap).
Set width and height in your Framer canvas for the desired responsive card stack size.
Enable the auto cycle carousel option for automatic transitions, and fine-tune timing and interactions for your use case.
How it Works
Cards: Add as many card frames as you like; each will be stacked in the interactive card carousel.
Stack Spacing: Controls vertical space between cards for a layered slideshow card stack.
Stack Scale: Shrinks each card slightly as they go down the stack for a 3D card carousel effect.
Drop Distance: The distance the top card must be dragged to trigger an advance, great for a gesture card carousel.
Auto Cycle: Automatically advances cards at set intervals to create an auto cycle carousel.
Cycle Interval: Controls pause duration before cycling to the next card.
Animation Duration: Adjusts transition speed for smooth animated card stack movements.
Advance Method: Choose between swipe card carousel interaction (drag down) or tap to slide cards.
Swipe Threshold: (Visible only for “swipe”) Set how far a card must be dragged as a percentage of drop distance.
All controls are available directly in the properties panel for fast, no code card carousel adjustments.
Features
Responsive Card Stack: Adapts to your card designs and parent frame size.
Gesture Ready: Create a gesture card carousel with swipe, drag, or tap to slide cards.
Customizable Animations: Fine-tune spacing, scale, swipe sensitivity, and animation speed.
Auto Cycle Carousel: Automate slideshows, onboarding flows, or previews with adjustable intervals.
Slideshow Card Stack: Ideal for storytelling, galleries, and multi-step tutorials.
3D Card Carousel Effect: Add depth with scaling and stack spacing controls.
Draggable Card Carousel: Let users drag cards naturally for smooth interactivity.
Interactive Card Carousel: Combine tap and swipe interactions for maximum flexibility.
Performance Optimized: Only visible cards animate; unused cards stay hidden for smooth UX.
No Code Card Carousel: Fully customizable inside Framer’s panel with zero coding required.
Properties Control Panel
Framer-native, lightweight, and built for modern design workflows, the Card Stack Carousel gives you full control to design interactive card stacks that feel natural and engaging.
Made with ❤️ by Nitso
Have questions or need a custom Framer component? Reach out at creator.nitso@gmail.com
