CMS Carousels (5)
Powerful CMS carousel with 5 styles, supports Collection Lists/Gallery/Static images. Features autoplay, hover-pause, custom animations, high performance & full customization.
Make it with Workshop
Build your own component with AI
Powerful CMS carousel with 5 styles, supports Collection Lists/Gallery/Static images. Features autoplay, hover-pause, custom animations, high performance & full customization.
Make it with Workshop
Build your own component with AI
🎯 Purpose & Objective
This ultimate CMS Carousel component transforms your Framer CMS content into stunning, interactive image carousels with professional-grade animations and transitions. Perfect for showcasing portfolios, product galleries, testimonials, or any visual content that needs elegant presentation.
🔌 Data Source Flexibility
Collection Lists - Connect directly to your CMS collections for dynamic content
Gallery - Use Framer's native gallery component for quick image sets
Static Items - Add individual components for custom layouts
🎨 5 Professional Styles
Simple - Clean horizontal sliding transition
Fade - Smooth opacity crossfade between slides
Peek Edges - Preview adjacent slides for context
Cards Expand - Dynamic scaling with depth effect
Coverflow 3D - Apple-inspired 3D rotation effect
⚙️ Core Features
Autoplay with customizable intervals (800ms - 8000ms)
Pause on Hover - Intelligent interaction detection
Image Ratio Control - Preserve original ratios or set custom dimensions
Flexible Navigation - Arrows inside/outside, 6 position options
Dot Indicators - Visual progress tracking
Infinite Loop - Seamless continuous scrolling
Keyboard Support - Arrow key navigation
Touch/Swipe - Mobile-friendly gesture controls
Click-to-Navigate - Optional side-click advancement
🎛️ Customization Options
Visual Theming - Control colors, backgrounds, opacity
Animation Speed - Fine-tune transition timing (0.1s - 1.2s)
Border Radius - Rounded corners (0-50px)
Object Fit - Cover, contain, fill, or scale-down modes
Gap Control - Spacing between slides (0-80px)
Size Constraints - Min/max width and height settings
🚀 Performance Features
Smart Preloading - Three strategies: All, Current+2, or Lazy
Optimized Rendering - Efficient DOM manipulation
Loading States - Built-in spinner animation
Responsive Design - Adapts to container dimensions
📋 How to Set Up
Drop the component into your Framer project
Choose your data source (Gallery/Collection/Static)
Connect your content (images or components)
Select your preferred style preset
Configure interaction settings (autoplay, navigation, etc.)
Customize appearance (colors, spacing, animations)
Fine-tune performance options if needed
💡 Best Use Cases
Product showcases in e-commerce sites
Portfolio presentations for creative work
Client testimonial rotations
Hero banner slideshows
Image galleries with professional transitions
Before/after comparisons
Team member spotlights
Event photo collections
