5c:I[333483,["/creators-assets/_next/static/immutable/chunks/16d0e6blr3zvd.js","/creators-assets/_next/static/immutable/chunks/3jpuro209qqra.js","/creators-assets/_next/static/immutable/chunks/2qlox892e2j_q.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/1jubx4t_1hq7l.js","/creators-assets/_next/static/immutable/chunks/30hhj9fl_j_en.js","/creators-assets/_next/static/immutable/chunks/07e2f_v4-u-we.js","/creators-assets/_next/static/immutable/chunks/33adfll0sgxzj.js","/creators-assets/_next/static/immutable/chunks/2504rifrkrd_l.js","/creators-assets/_next/static/immutable/chunks/3orcs6a8eyfvz.js","/creators-assets/_next/static/immutable/chunks/19-jcjdymr-fa.js","/creators-assets/_next/static/immutable/chunks/39xjxvqtwa0x7.js","/creators-assets/_next/static/immutable/chunks/41zrh_r6fdtfq.js","/creators-assets/_next/static/immutable/chunks/120zfy8hqrcwf.js","/creators-assets/_next/static/immutable/chunks/19r4rf2zyng-y.js","/creators-assets/_next/static/immutable/chunks/3o3dwck1w1ue6.js","/creators-assets/_next/static/immutable/chunks/2c_4he4mvu2r0.js","/creators-assets/_next/static/immutable/chunks/3n0g19afc7srh.js","/creators-assets/_next/static/immutable/chunks/3q7g04e77g4lf.js","/creators-assets/_next/static/immutable/chunks/1u1uuj9mj0hoo.js","/creators-assets/_next/static/immutable/chunks/0lmnldnlzsgok.js","/creators-assets/_next/static/immutable/chunks/2iw_-bo8jogap.js","/creators-assets/_next/static/immutable/chunks/0z2hzm-7v_g2c.js","/creators-assets/_next/static/immutable/chunks/3o1z26bd2_9eh.js","/creators-assets/_next/static/immutable/chunks/2qeyp4zfa4qwb.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/2qrxli96_t9cq.js","/creators-assets/_next/static/immutable/chunks/27vyv0cqm_295.js","/creators-assets/_next/static/immutable/chunks/1_2vu9p6mra4j.js","/creators-assets/_next/static/immutable/chunks/37uei1iwbnu3m.js","/creators-assets/_next/static/immutable/chunks/05i2jce8amocn.js","/creators-assets/_next/static/immutable/chunks/2njnkxjf39nsf.js","/creators-assets/_next/static/immutable/chunks/3edl5e308nytq.js","/creators-assets/_next/static/immutable/chunks/17w9c6wazundy.js","/creators-assets/_next/static/immutable/chunks/3zq_69yv5l6lg.js","/creators-assets/_next/static/immutable/chunks/14pxn0b6e1dc9.js","/creators-assets/_next/static/immutable/chunks/44oc0x6k7mw-i.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/2_qutx8yar-up.js","/creators-assets/_next/static/immutable/chunks/0p4vy6mn-x9zs.js"],"PostDetailCard"] 5d:T76d,

Overview

CMS Gallery Carousel is a wrapper that turns your Framer CMS gallery into a polished, draggable horizontal carousel. Built for the most common Framer use case: showing a row of project or product images from a CMS where the images come in different aspect ratios and you don't want to crop, mask, or hand-size every one.

What it does

Auto-fits every image in the slotted row to a single shared height — portraits and landscapes line up side by side without manual cropping.
Draggable with momentum and an elastic bounce at the edges (configurable).
Optional left/right arrow buttons that fade in only when there's content to scroll to in that direction.
Optional thin scrollbar indicator that tracks drag progress.
Built-in click-vs-drag detection: a horizontal swipe never triggers a click on a child link, so dragging through a gallery never accidentally opens a project page.

Perfect for:

Showcasing large imagery in creative portfolio presentations
Image-rich case studies and project pages
Editorial layouts with mixed-aspect visuals
Any CMS-driven gallery where photos vary in size and shape

Customization

Scrollbar on/off
Elasticity (0 = hard stop, 1 = full bounce)
Arrows on/off, with per-click scroll distance, size, color, background, and border radius
Works with any height you set on the container

How to use it

Build your CMS gallery row as you normally would.
Drop in the CMS Gallery Carousel, set the width and a fixed height.
Slot your CMS row into the Content slot.
Tune arrows, scrollbar, and elasticity in the property panel.

59:[["$","$L5c",null,{"post":{"id":"019e6556-29f0-7497-9a26-af5692916076","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"cfffe369-519f-4e6e-9689-0abca60f34cb","name":"Filip Banasiak","slug":"filip-banasiak","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/221996/avatar-fkqNBQwWSqz1hHV6UlZdZwyTG7ZH5O.jpg","badges":["available","pro","expert"],"followed":false,"followsYou":false},"media":[],"resources":[{"id":"A0mQ7AReUudYhUlPb9E8","resolved":true,"title":"CMS Gallery Carousel","body":"$5d","bodyJson":{"type":"doc","content":[{"type":"customHeading","content":[{"type":"text","text":"Overview"}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"CMS Gallery Carousel is a wrapper that turns your Framer CMS gallery into a polished, draggable horizontal carousel. Built for the most common Framer use case: showing a row of project or product images from a CMS where the images come in different aspect ratios and you don't want to crop, mask, or hand-size every one."}]},{"type":"customHeading","content":[{"type":"text","text":"What it does"}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Auto-fits every image in the slotted row to a single shared height — portraits and landscapes line up side by side without manual cropping."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Draggable with momentum and an elastic bounce at the edges (configurable)."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Optional left/right arrow buttons that fade in only when there's content to scroll to in that direction."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Optional thin scrollbar indicator that tracks drag progress."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Built-in click-vs-drag detection: a horizontal swipe never triggers a click on a child link, so dragging through a gallery never accidentally opens a project page."}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Perfect for:"}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Showcasing large imagery in creative portfolio presentations"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Image-rich case studies and project pages"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Editorial layouts with mixed-aspect visuals"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Any CMS-driven gallery where photos vary in size and shape"}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Customization"}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Scrollbar on/off"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Elasticity (0 = hard stop, 1 = full bounce)"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Arrows on/off, with per-click scroll distance, size, color, background, and border radius"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Works with any height you set on the container"}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"How to use it"}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Build your CMS gallery row as you normally would."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Drop in the CMS Gallery Carousel, set the width and a fixed height."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Slot your CMS row into the Content slot."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Tune arrows, scrollbar, and elasticity in the property panel."}]}]}]}]},"introduction":"Turn CMS galleries into carousels","slug":"cms-gallery-carousel","author":{"framerUserId":"cfffe369-519f-4e6e-9689-0abca60f34cb","name":"Filip Banasiak","slug":"filip-banasiak","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/221996/avatar-fkqNBQwWSqz1hHV6UlZdZwyTG7ZH5O.jpg","badges":["available","pro","expert"],"followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/A0mQ7AReUudYhUlPb9E8/cms-gallery-carousel-u5eqV2PptCj6Yho0IovXRsOvSLvNzX"}],"post":null,"createdAt":"2026-05-04T21:16:33.778Z","updatedAt":"2026-07-07T11:39:32.934Z","publishedAt":"2026-05-26T17:30:06.192Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://gallerycarousel.framer.website","price":"9","paymentUrl":"https://filipbanasiak.lemonsqueezy.com/checkout/buy/3b0dce6f-01a1-407f-8ecc-e6a24d798059","workshop":true,"categories":[{"id":"3a855006-6097-4489-b33b-8024cb26633e","name":"Interactions","slug":"interactions"}],"lastSaveId":"HDOGFRCmPVqPgnqVjvI7"}}],"contests":[],"categories":[],"tags":[],"likes":{"count":12,"liked":false},"comments":{"count":1},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-05-26T17:30:06.192Z","updatedAt":"2026-05-26T17:30:06.192Z","reported":false}}],"$L5e"]

Suggested for you