How to use Framer Carousel Pro
A powerful, customizable carousel component for Framer that handles everything from simple image sliders to complex content showcases.
Understanding the Basics
This isn't your average slideshow. It's built on top of Swiper.js (one of the most powerful carousel libraries out there) and wrapped up with Framer-friendly controls.
You get:
Multiple layout modes - columns, aspect ratio preservation, or poster-style presentations.
Smart looping - it actually works properly, even in tricky scenarios.
Variant support - your slides can have different states (active vs inactive).
Autoplay with progress tracking - because sometimes you need to show a progress indicator.
Crossfade transitions - for that Netflix-style presentation mode.
Layout modes explained
Height Settings
The component needs to know how you want it to handle height. You've got three options:
Auto (Fit Content)
The carousel sizes itself based on your content
Perfect when your slides have varying heights
Just... lets everything breathe naturally
Stretch (Fill Height)
Takes up 100% of its parent container's height
Great for full-screen hero sections
Your slides will stretch to fill the available space
Rows
Divides the height into equal rows
Useful for grid-style layouts
Set the number of rows you want (1-10)
💡 Pro tip: Use the Height Inset control to reduce the height by a specific pixel amount. Handy when you need precise spacing.
Width Settings
This is where things get interesting...
Columns Mode
Shows a specific number of slides at once (1-10)
Classic carousel behavior
Set your gap between slides and you're done
Aspect Ratio Mode
Preserves the natural aspect ratio of your content
Perfect for images or videos with different dimensions
Each slide sizes itself automatically
Works beautifully with both landscape and portrait content
Max Width (Poster) Mode
This is the Netflix mode
Centers one slide at a time with a maximum width
Great for hero sections or feature showcases
Automatically enables centered slides behavior
Core Features
Looping
Enable loop mode and the carousel cycles infinitely. When you reach the end, it smoothly wraps back to the beginning.
A few notes about looping:
Works differently depending on your layout mode
In poster mode with crossfade, uses a custom implementation for better performance
Automatically handles edge cases (like when you don't have enough slides)
Navigation Controls
Arrows
Show/hide navigation arrows
Choose between caret or arrow icons
Customize color, size, and weight
Control the inset (distance from edges)
Optional: only show on hover
Dots (Pagination)
Toggle visibility
Customize active/inactive colors
Adjust size, gap, and container styling
Add blur effects to the dot container
Position with the inset controls
Keyboard Control
Let users navigate with arrow keys
Just toggle it on
Spacing & Padding
Gap Between Slides
Simple number input
Sets the space between each slide
Padding
Apply uniform padding to all sides
Or... switch to "Per Side" mode for precise control
Top, Right, Bottom, Left - customize each independently
Visual effects
Centered Slides
When enabled, the active slide centers itself in the viewport. The slides on either side peek in from the edges.
Automatically enabled in Poster (Max Width) mode because... well, that's how poster mode is supposed to work.
Effect system
Toggle "Enable Effects" to unlock scale and opacity controls:
Active Slide Scale
Make the active slide bigger (0.5x to 2x)
Default is 1.0 (no scaling)
Inactive Slide Opacity
Fade out inactive slides (0.1 to 1.0)
Default is 0.4
Inactive Slide Scale
Shrink inactive slides (0.5x to 1x)
Default is 0.85
Slide Overlap
Control how much slides overlap horizontally
Range: 40-110
Higher values = more overlap
—
3D Coverflow Effect
Enable this for that Apple iTunes-style 3D rotation effect. It's... pretty dramatic. Use it when you want slides to rotate and stack in 3D space.
Crossfade Transitions
Instead of sliding, slides fade in and out. Particularly useful in Poster mode for a more elegant presentation.
Note: In poster mode with crossfade enabled, the component uses absolute positioning and custom opacity transitions. It's buttery smooth.
Variant Effects (Advanced)
This is where things get really powerful...
What Are Variant Effects?
If your slide components have multiple variants (different visual states), the carousel can automatically switch between them based on whether a slide is active or inactive.
How it works:
Create a component with at least two variants (e.g., "Default" and "Active")
Add these components as carousel slides
Enable "Variant Effects" in the carousel settings
Specify which variant names to use for active/inactive states
The carousel handles the rest
Example use case:
Your slide component has a "Default" variant (grayed out, smaller)
And an "Active" variant (full color, larger, with animation)
As users navigate, slides automatically transition between states
⚠️ Important: For smooth looping with variants, use at least 6 slides. If you have fewer, consider duplicating some slides to prevent visual glitches during the loop transition.
Autoplay Features
Basic Autoplay
Toggle it on, set your delay (in milliseconds), and the carousel automatically advances through slides.
Default delay: 3000ms (3 seconds)
Range: 1000ms to 10000ms
Autoplay Progress (Advanced).
Interaction Settings
Enable drag
Let users swipe or drag to navigate. Works on both touch devices and desktop (click and drag).
Automatically disabled in Poster mode to prevent accidental swipes.
Click to Navigate
Enable this and users can click the left/right sides of the carousel to navigate. Click left = previous slide, click right = next slide.
Initial slide
Set which slide shows first (0 = first slide, 1 = second slide, etc.). Useful when you want to feature a specific slide on page load.
Styling options
Border Radius
Round the corners of your slides (0-100px). Applied to each slide container.
Allow Overflow
By default, the carousel clips content. Enable this to let elements overflow the bounds - perfect for:
Hover effects that scale up
Shadows that extend beyond slide boundaries
Absolutely positioned elements
Remote Buttons Controls
Each purchase of the carousel pro component comes with two free buttons that you can place anywhere on the same page as the carousel to control it remotely. This allows you to achieve really nice layouts that weren't previously possible with the native framer component.
Button Map
Set a unique number (1-10) on your buttons and the SAME number on your corresponding carousel to link them together.
Use case: Multiple carousels on one page, each controlled by different buttons.
Questions & Support?
Feel free to drop me a message anytime and i'll be on hand to help.
Danmarek@outlook.com
ps. the fancy side-nav component on this page is also available for sale here.