5d:I[333483,["/creators-assets/_next/static/immutable/chunks/16d0e6blr3zvd.js","/creators-assets/_next/static/immutable/chunks/1rc641binzbjp.js","/creators-assets/_next/static/immutable/chunks/12ci1vsd8nj4u.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/2ply_q-h6u_2z.js","/creators-assets/_next/static/immutable/chunks/33adfll0sgxzj.js","/creators-assets/_next/static/immutable/chunks/1pb7yncyfm9fe.js","/creators-assets/_next/static/immutable/chunks/1j6jg0y72xk13.js","/creators-assets/_next/static/immutable/chunks/2njnkxjf39nsf.js","/creators-assets/_next/static/immutable/chunks/26nhnsanh2piz.js","/creators-assets/_next/static/immutable/chunks/03itqfxm4gmj8.js","/creators-assets/_next/static/immutable/chunks/114fkj16mhe97.js","/creators-assets/_next/static/immutable/chunks/3zq_69yv5l6lg.js","/creators-assets/_next/static/immutable/chunks/19-jcjdymr-fa.js","/creators-assets/_next/static/immutable/chunks/16inv17cv83xq.js","/creators-assets/_next/static/immutable/chunks/2760bhhttj0zo.js","/creators-assets/_next/static/immutable/chunks/3_z6gb0g1nigd.js","/creators-assets/_next/static/immutable/chunks/3vlbhrh3-zofo.js","/creators-assets/_next/static/immutable/chunks/120bipr4k16wv.js","/creators-assets/_next/static/immutable/chunks/3ea2l_ol8wqqa.js","/creators-assets/_next/static/immutable/chunks/3o3dwck1w1ue6.js","/creators-assets/_next/static/immutable/chunks/19r4rf2zyng-y.js","/creators-assets/_next/static/immutable/chunks/2qrxli96_t9cq.js","/creators-assets/_next/static/immutable/chunks/3edl5e308nytq.js","/creators-assets/_next/static/immutable/chunks/05i2jce8amocn.js","/creators-assets/_next/static/immutable/chunks/14pxn0b6e1dc9.js","/creators-assets/_next/static/immutable/chunks/1zr4ew02k6y_l.js","/creators-assets/_next/static/immutable/chunks/2504rifrkrd_l.js","/creators-assets/_next/static/immutable/chunks/08ajsjh8ypdt2.js","/creators-assets/_next/static/immutable/chunks/1ddgh6mv1wg4x.js","/creators-assets/_next/static/immutable/chunks/3o1z26bd2_9eh.js","/creators-assets/_next/static/immutable/chunks/3t6k2_m2gc3-k.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/1_2vu9p6mra4j.js","/creators-assets/_next/static/immutable/chunks/2qeyp4zfa4qwb.js","/creators-assets/_next/static/immutable/chunks/0w6oa8_ba59u4.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3sa-o_ztvtkwe.js","/creators-assets/_next/static/immutable/chunks/3c3kl-ixsd844.js"],"PostDetailCard"] 5e:T64d,

Showreel Carousel — a media-aware carousel for Framer.

Most carousels treat slides as static pictures. This one treats them as media: when a slide becomes active its video or audio plays, and when it leaves the viewport it pauses. No overrides, no custom code, no five videos autoplaying over each other. Drop in any frames, images, or components as slides — perfect for showreels, product tours, and portfolio reels.

Features:

Media-aware playback: video and audio auto-play on the active slide and pause on the rest.
Inactive cards can dim and scale to keep focus on the active slide.
Autoplay with adjustable interval and optional loop.
Play / pause control plus progress dots, where the active dot fills in time with the autoplay interval.
Width modes mirror Framer's own: Fixed, Relative, Fit content and Per view (gap-aware — set 2 and exactly two fit; use 1.15 to peek the next card).
Height modes: Fill, Fixed, Viewport, Ratio, Fit content.
Min / Max width and height in px, % or vh.
Alignment (start, center, end) for every width mode.
Optional edge fade and arrows with X / Y offset.
Fully themeable dots, controls, colors, radius and spacing.
Respects reduced-motion, updates instantly in the editor, and ships with a live placeholder so it looks right before you add a single slide.

How to use: drag it in, add your slides, set sizing and styling. Video and audio start working automatically.

5a:[["$","$L5d",null,{"post":{"id":"019efaa1-1633-74c7-b84b-05ed017c6114","title":null,"body":"

let's try it

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"let's try it"}]}]},"author":{"framerUserId":"e2bbfe77-a970-4878-ad80-1cba2b768b09","name":"Ivan Marchukov","slug":"ivnmrch","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/e2bbfe77-a970-4878-ad80-1cba2b768b09/2d3s23yk","followed":false,"followsYou":false},"media":[],"resources":[{"id":"W2pBQ405WCPdiPce7tUY","resolved":true,"title":"Showreel Carousel","body":"$5e","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Showreel Carousel — a media-aware carousel for Framer."}]},{"type":"paragraph","content":[{"type":"text","text":"Most carousels treat slides as static pictures. This one treats them as media: when a slide becomes active its video or audio plays, and when it leaves the viewport it pauses. No overrides, no custom code, no five videos autoplaying over each other. Drop in any frames, images, or components as slides — perfect for showreels, product tours, and portfolio reels."}]},{"type":"paragraph","content":[{"type":"text","text":"Features:"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Media-aware playback: video and audio auto-play on the active slide and pause on the rest."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Inactive cards can dim and scale to keep focus on the active slide."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Autoplay with adjustable interval and optional loop."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Play / pause control plus progress dots, where the active dot fills in time with the autoplay interval."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Width modes mirror Framer's own: Fixed, Relative, Fit content and Per view (gap-aware — set 2 and exactly two fit; use 1.15 to peek the next card)."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Height modes: Fill, Fixed, Viewport, Ratio, Fit content."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Min / Max width and height in px, % or vh."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Alignment (start, center, end) for every width mode."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Optional edge fade and arrows with X / Y offset."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Fully themeable dots, controls, colors, radius and spacing."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Respects reduced-motion, updates instantly in the editor, and ships with a live placeholder so it looks right before you add a single slide."}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"How to use: drag it in, add your slides, set sizing and styling. Video and audio start working automatically."}]}]},"introduction":"Autoplay video & audio per slide","slug":"showreel-carousel","author":{"framerUserId":"e2bbfe77-a970-4878-ad80-1cba2b768b09","name":"Ivan Marchukov","slug":"ivnmrch","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/e2bbfe77-a970-4878-ad80-1cba2b768b09/2d3s23yk","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/e2bbfe77-a970-4878-ad80-1cba2b768b09/ruodmos4","metadata":{"tint":{"h":0,"s":0,"l":9},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-06-24T17:15:21.470Z","updatedAt":"2026-06-24T20:15:07.095Z","publishedAt":"2026-06-24T17:15:21.467Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://showreel-carousel.framer.website","price":"5","paymentUrl":"https://buy.stripe.com/fZu9AS3Wa9EH35Pe2IgjC01","workshop":false,"categories":[{"id":"8f93ccfe-423c-47f2-b8ae-79e9e132012f","name":"Carousels","slug":"carousels"}],"lastSaveId":"NT7R3p8u2g5unqutNNNk","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":21,"liked":false},"comments":{"count":2},"reposts":{"count":0,"reposted":false,"repostId":null},"version":2,"edited":true,"editedAt":"2026-06-24T17:41:59.840Z","createdAt":"2026-06-24T17:15:21.524Z","updatedAt":"2026-06-24T17:41:59.840Z","reported":false}}],"$L5f"]

Suggested for you