5d:I[333483,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/15s1ft4k9lx-7.js","/creators-assets/_next/static/immutable/chunks/0x8sumr53pdkk.js","/creators-assets/_next/static/immutable/chunks/3pud1dqsw0-_7.js","/creators-assets/_next/static/immutable/chunks/1m75iqpnspynu.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/3ohf-5_4hfjuq.js","/creators-assets/_next/static/immutable/chunks/2jjhfe7-w6y9a.js","/creators-assets/_next/static/immutable/chunks/325i2v5l4tnlq.js","/creators-assets/_next/static/immutable/chunks/0kisxyo3aw231.js","/creators-assets/_next/static/immutable/chunks/2b1mm8iiske-y.js","/creators-assets/_next/static/immutable/chunks/0i7m0zg6jfazw.js","/creators-assets/_next/static/immutable/chunks/3-hmotkz_bdv_.js","/creators-assets/_next/static/immutable/chunks/06bqtx1jsc1kz.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/3naniu4pnqfyw.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/456d4lcv9-syj.js","/creators-assets/_next/static/immutable/chunks/36-o7-3julke0.js","/creators-assets/_next/static/immutable/chunks/2xq6uu2rcdc2i.js","/creators-assets/_next/static/immutable/chunks/2y9gv91n8o3i9.js","/creators-assets/_next/static/immutable/chunks/41i4r4u9uolgz.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/15q00pdqk0br3.js","/creators-assets/_next/static/immutable/chunks/293prjxu_wz0c.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/40oma2w708rd-.js","/creators-assets/_next/static/immutable/chunks/2x7-2b3jcc9x7.js","/creators-assets/_next/static/immutable/chunks/3_pg4jxj9aiiw.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/3l2h8slpbzxqo.js","/creators-assets/_next/static/immutable/chunks/2xgtw4s-tlhet.js","/creators-assets/_next/static/immutable/chunks/3b306xa-3tb7g.js","/creators-assets/_next/static/immutable/chunks/2fvzgkzqkig_w.js","/creators-assets/_next/static/immutable/chunks/3g6klxxyg4m8-.js","/creators-assets/_next/static/immutable/chunks/0qx5rzvbsd7bx.js","/creators-assets/_next/static/immutable/chunks/1cphzzg2t2qo2.js"],"PostDetailCard"] 5e:T997,

CMS Carousel for Framer

A flexible, fully customizable carousel for Framer CMS. Connect a CMS Collection List and create a polished carousel experience while keeping complete control over navigation, layout, indicators, animation, and styling.

KEY FEATURES

Complete Design Control

Use any Framer layer as a custom Prev/Next button
Design navigation to match your brand
Customize indicator colors, size, spacing, opacity, and position
Control padding, gaps, alignment, background, and overflow
Customize animation timing and easing

CMS & Layout

Connect directly to a CMS Collection List
Display 1–10 items at once
Adjustable item spacing and padding
Responsive layout calculations
Automatic CMS content discovery
Supports multiple carousels on the same page

Interactions

Drag and swipe navigation
Smart horizontal/vertical gesture detection
Keyboard arrow navigation
Auto-advance with configurable timing
Pause auto-advance on hover
Clickable navigation indicators
Smooth Framer Motion animations

Custom Navigation Create your own navigation buttons using icons, text, shapes, images, or custom components. Apply the included Prev/Next overrides to connect them to your carousel.

Each carousel can have its own ID, allowing separate navigation controls to operate different carousels independently.

Indicators Customize indicator size, colors, spacing, padding, opacity, corner radius, inset, background, and backdrop blur.

GETTING STARTED

Add CMS Carousel to your Framer canvas.
Connect your CMS Collection List to Content.
Set the number of visible items and spacing.
Customize your indicators and animations.
Create your own Prev/Next buttons.
Apply the navigation overrides.
Give each carousel a unique ID when using multiple carousels.
Publish your fully customized CMS experience.

Your CMS content. Your navigation. Your design.

5a:[["$","$L5d",null,{"post":{"id":"01a0b8ee-7deb-7078-a1ae-e7e19c4d09e7","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"300a7de7-5774-4f16-ae39-50c1abb06320","name":"Elhary","slug":"elhary","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/300a7de7-5774-4f16-ae39-50c1abb06320/t0vs87kt","followed":false,"followsYou":false},"media":[],"resources":[{"id":"z7q7RMUcf9cJWBQ93KGI","resolved":true,"title":"Custom CMS Carousel","body":"$5e","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"CMS Carousel for Framer","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"A flexible, fully customizable carousel for Framer CMS. Connect a CMS Collection List and create a polished carousel experience while keeping complete control over navigation, layout, indicators, animation, and styling."}]},{"type":"customHeading","content":[{"type":"text","text":"KEY FEATURES"}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"Complete Design Control","marks":[{"type":"bold"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Use any Framer layer as a custom Prev/Next button"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Design navigation to match your brand"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Customize indicator colors, size, spacing, opacity, and position"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Control padding, gaps, alignment, background, and overflow"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Customize animation timing and easing"}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"CMS & Layout","marks":[{"type":"bold"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Connect directly to a CMS Collection List"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Display 1–10 items at once"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Adjustable item spacing and padding"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Responsive layout calculations"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Automatic CMS content discovery"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Supports multiple carousels on the same page"}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"Interactions","marks":[{"type":"bold"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Drag and swipe navigation"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Smart horizontal/vertical gesture detection"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Keyboard arrow navigation"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Auto-advance with configurable timing"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Pause auto-advance on hover"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Clickable navigation indicators"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Smooth Framer Motion animations"}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"Custom Navigation","marks":[{"type":"bold"}]},{"type":"text","text":" Create your own navigation buttons using icons, text, shapes, images, or custom components. Apply the included Prev/Next overrides to connect them to your carousel."}]},{"type":"paragraph","content":[{"type":"text","text":"Each carousel can have its own ID, allowing separate navigation controls to operate different carousels independently."}]},{"type":"paragraph","content":[{"type":"text","text":"Indicators","marks":[{"type":"bold"}]},{"type":"text","text":" Customize indicator size, colors, spacing, padding, opacity, corner radius, inset, background, and backdrop blur."}]},{"type":"customHeading","content":[{"type":"text","text":"GETTING STARTED"}],"attrs":{"level":2}},{"type":"orderedList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Add CMS Carousel to your Framer canvas."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Connect your CMS Collection List to Content."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Set the number of visible items and spacing."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Customize your indicators and animations."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Create your own Prev/Next buttons."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Apply the navigation overrides."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Give each carousel a unique ID when using multiple carousels."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Publish your fully customized CMS experience."}]}]}],"attrs":{"type":null,"start":1}},{"type":"paragraph","content":[{"type":"text","text":"Your CMS content. Your navigation. Your design.","marks":[{"type":"bold"}]}]}]},"introduction":"Design your own CMS carousel","slug":"custom-cms-carousel","author":{"framerUserId":"300a7de7-5774-4f16-ae39-50c1abb06320","name":"Elhary","slug":"elhary","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/300a7de7-5774-4f16-ae39-50c1abb06320/t0vs87kt","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/300a7de7-5774-4f16-ae39-50c1abb06320/01a0b8eb-d182-7231-9a15-017f98f5bd64.png","metadata":{"tint":{"h":0,"s":0,"l":9},"width":3200,"height":2400}}],"post":null,"createdAt":"2026-09-19T09:10:32.091Z","updatedAt":"2026-09-19T09:10:32.091Z","publishedAt":"2026-09-19T09:10:32.089Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://gentle-interaction-787306.framer.app/","price":"8","paymentUrl":"https://ko-fi.com/s/f188234373","workshop":false,"categories":[{"id":"8f93ccfe-423c-47f2-b8ae-79e9e132012f","name":"Carousels","slug":"carousels"}],"lastSaveId":"xkAVI3CmGB0KLIAJGylk","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":4,"liked":false},"comments":{"count":1},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-09-19T09:10:32.683Z","updatedAt":"2026-09-19T09:10:32.683Z","reported":false}}],"$L5f"]

Suggested for you