The CMS Gap Framer Never Filled — Framer's native Carousel requires you to manually connect each child to the component one by one that means a tedious amount of manual bindings every time your content changes. This component eliminates that entirely — connect your CMS Collection List once and every item appears automatically, forever.
Truly Dynamic — Add a new blog post, product, or team member to your CMS and it shows up in the carousel instantly. No canvas edits, no re-binding, no republishing components.
Multi-Slide View with Peek — Show 1–10 slides at once. Set a Peek Amount to reveal a sliver of the next slide, teasing users to keep scrolling.
Animated Dot Indicators — The active dot expands into a pill with a smooth width animation. Full control over size, gap, fill, backdrop blur, and active/inactive opacity.
Custom Arrow Buttons — Default chevron arrows auto-contrast against your fill color. Upload your own icons for a fully branded navigation.
Edge Fading — An optional CSS mask softly fades slides in and out at the left and right edges for an editorial, high-end feel.
Autoplay with Hover Pause — Optional auto-advance on a configurable timer. Pauses on mouse hover, resumes on leave.
Drag, Swipe & Keyboard — Works with mouse drag, touch swipe, and left/right arrow keys with no additional setup.
Frosted Glass Dots — The dot backdrop supports backdrop-filter blur for a polished glassy overlay effect.
Fully Accessible — Complete ARIA markup throughout: role="region", role="tablist", aria-selected, aria-label, and full keyboard navigation.
Helpful Canvas Placeholder — When no collection is connected yet, a clear instructional UI appears directly on the canvas so you always know what to do next.
Framer's built-in carousel is a visual tool — it's designed for manually placed, manually bound slides. That works fine for 3 slides. It doesn't work when your content lives in a CMS.
Imagine you run a blog with 40 posts and want a "Latest Articles" carousel on your homepage. With the native carousel, you'd drag in 40 slides and manually connect them.
This component makes that problem disappear. Drop in your CMS Collection List — the same one you already use for your blog grid or list — and the carousel reads every item automatically. Your content team can publish 100 new posts and the carousel stays perfectly up to date without anyone touching Framer.
Property Controls
CMS Collection — Connect your Framer CMS Collection List directly
Slides / View + Peek Amount — Visible slides count and next-slide reveal
Gap / Padding / Alignment — Full layout control
Overflow — Hidden or visible (required for peek effects)
Transition + Duration — Smooth slide animation with configurable speed
Autoplay + Interval — Auto-advance with hover pause
Edge Fading + Width + Opacity — Soft mask fade at carousel edges
Arrows — Toggle, fill, size, radius, inset, vertical offset, custom icons
Dots — Toggle, size, gap, fill, backdrop color, blur, radius, active/inactive opacity
Aria Label — Accessible region name for screen readers
Blog or article carousels that stay in sync with your CMS automatically
Product showcases pulling directly from your product collection
Team member sliders that update when HR adds someone new
Portfolio case study carousels
Testimonial or review feeds with dozens of entries
Paste the component into Framer via Assets → Code.
Drag it onto the canvas — a placeholder with setup instructions appears.
In the right panel under "CMS Collection," connect your existing CMS Collection List.
That's it — every CMS item is now a slide. Adjust layout, arrows, dots, and animation to match your design.
To show adjacent slides peeking at the edges, set Overflow → Visible and increase Peek Amount.
Aliasgar Amir
