About Universal Carousel
A simple carousel for Framer. Works with static layers or a CMS collection, and exposes the layout, autoplay, arrows and dots as property controls, so you configure it on the canvas instead of editing code.
Content
Static Items (any component instances), a Collection (Framer CMS list), or a Gallery field.
Multiple items per view (1–12), gap, padding, and vertical alignment.
Optional shuffle - order is randomized once per page load.
Motion
Autoplay with adjustable interval and a hover speed multiplier.
Autoplay pauses when the carousel scrolls out of view, when the tab is hidden, and while dragging.
Infinite loop, or clamped at the ends with disabled arrows.
Drag/swipe with velocity-based flicks; a short drag snaps back, a fast one advances.
Uses Framer's Transition control, so the easing is whatever you set.
Arrows
Built-in chevrons or your own images; chevron color adapts to the button fill.
Fill, padding, radius, border, background blur.
Spaced apart or grouped together, nine anchor positions, per-side offsets.
Optional fade-in on hover (pointer devices only).
Dots
Fixed-size dots or full-width bars.
Progress fill that follows the autoplay timer, including the hover slowdown (bars + autoplay only).
Active/inactive colors, gap, radius, optional backdrop with its own padding, radius and blur.
Nine anchor positions, per-side offsets.
Edges
Fade mask on both sides, or visible overflow so slides bleed outside the frame.
Accessibility
Region and slide roles with labels, left/right arrow key navigation.
Looped duplicates are hidden from screen readers and removed from tab order.
Requirements and notes
No external dependencies beyond Framer Motion.
Height is auto; width is fixed or fill.
All slides render at once - there is no virtualization, so very large collections will cost what they cost.
Infinite mode renders extra copies of the set to make the loop seamless.
Progress dots require Fill size mode and Autoplay enabled.
