Universal Carousel

Carousel for static items and CMS

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.

Carousel for static items and CMS