---
title: "Universal Carousel — Framer component · Best of Framer"
description: "$5.00 · Framer component · by Ditych · Carousels. Carousel for static items and CMS"
canonical: "https://framer.elliotli.dev/component/universal-carousel"
---

[Home](/)/[Components](/components)/[Carousels](/components/category/carousels)/Universal Carousel

# Universal Carousel

Carousel for static items and CMS

[View on Framer](https://framer.com/marketplace/components/universal-carousel/?via=elliot-li)

![Universal Carousel preview image 1](https://framer.elliotli.dev/og/component/universal-carousel/2423cda89482a167/1600x1200.jpg)

## Summary

Carousel for static items and CMS

## Description

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.
    

## Rank history [How rankings work →](/terms#rankings)

-   All · #10558

## Details

- **Author**: Ditych
- **Price**: $5.00
- **Published**: 2026-08-25
- **Updated**: 2026-08-26
- **Added**: 2026-08-25
- **Categories**: Carousels

## More like this

-   [Screen Stage Mockup](/component/screen-stage-mockup) — Aisol Studio · $14 — Your screens in synced devices
-   [Team Reel](/component/team-reel) — Ali Musa · Free — Interactive Team Showcase
-   [Slider](/component/slider) — MAS · Free — A smooth, customizable slider.
-   [Cascade Card Slider](/component/cascade-card-slider) — Tim Yeng · Free — Cards that cascade into view