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:T1015,

About this Component

Image Video Carousel is the media presentation experience your portfolio or product page has been waiting for. It delivers a sophisticated three-panel carousel with a dynamically expanding focal card, a fully draggable infinite thumbnail navigation strip, a fullscreen lightbox with pinch-to-zoom for images, and seamless YouTube and video file playback — all tuned to feel like something a senior motion engineer spent weeks perfecting. Whether your client wants to showcase a property gallery, a product launch, or a creative reel, Image Video Carousel closes the gap between "static design mockup" and "jaw-dropping live experience" in minutes, not months.

Demo

https://imgvideocarousel.framer.website/playground

Perfect for

Creative Agencies & Studios: Showcase client work, campaign visuals, and reels in a presentation-grade format that impresses in the room and converts online.

Real Estate & Architecture: Display property galleries and architectural renders with cinematic transitions and fullscreen zoom — elevating every listing to luxury tier.

SaaS & Product Teams: Highlight product screenshots, feature walkthroughs, and video demos in a single cohesive component that keeps prospects engaged.

Freelance Designers & Portfolio Sites: Replace static image grids with a dynamic, interactive media experience that instantly communicates craft and attention to detail.

Feature Highlights

Cinematic Focus States: The active slide expands to 80% of the available width while side cards elegantly step back — creating natural visual hierarchy with every transition.

Infinite Thumbnail Navigator: A silky-smooth, infinitely looping thumbnail strip with inertia scrolling, hover lift animations, and auto-centering ensures your audience always knows where they are.

Fullscreen Lightbox with Smart Zoom: Click any image to open a 2.5× zoomable full-screen viewer, or launch YouTube and local video files in a polished cinematic overlay — with Escape-to-close and backdrop-dismiss support.

Gesture-Ready on Every Device: Drag, swipe, scroll, and keyboard navigation work flawlessly across desktop and mobile — with automatic layout adaptation below 810px for a native-feel experience everywhere.

Total Visual Control: Arrow colors, background overlays, card radius, gap spacing, thumbnail height, peek ratio, and hover animations are all exposed as simple Framer property controls — no code required.

The "Why"

Building a production-ready media carousel from scratch means weeks of wrestling with gesture systems, infinite loop math, responsive breakpoints, video embeds, and lightbox state management. Image Video Carousel has already solved every one of those problems. It's battle-tested, fully responsive, and ships with sensible defaults that look exceptional out of the box — while giving you the customization depth to match any brand or design system. Stop rebuilding the same carousel for every project and start delivering results that make clients say "how did you build that so fast?"

🛠 How to Use (3 Simple Steps)

Set Your Foundation: Drag Image Video Carousel onto your Framer canvas and add your media items — upload images or paste YouTube links directly in the property panel.

Define the Aesthetic: Adjust card radius, gap, thumbnail height, arrow colors, and hover animation to match your project's visual identity — all without touching a line of code.

Preview & Deploy: Switch to Preview mode to experience the full gesture and animation system, then publish. Your audience gets a world-class media experience on day one.

5a:[["$","$L5d",null,{"post":{"id":"019dfd33-71fe-72ee-b85b-8f05eec3a075","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"f9e9de99-7497-4b3f-b281-159bcc05f01b","name":"Gutemberg Lincoln","slug":"gutemberglincoln","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/f9e9de99-7497-4b3f-b281-159bcc05f01b/dit7rylc","badges":["available","studio"],"followed":false,"followsYou":false},"media":[],"resources":[{"id":"9q2JAEsyamP6ro74HmWC","resolved":true,"title":"Image Video Carousel","body":"$5e","bodyJson":null,"introduction":"Interactive image/video slideshow zoom","slug":"image-video-carousel","author":{"framerUserId":"f9e9de99-7497-4b3f-b281-159bcc05f01b","name":"Gutemberg Lincoln","slug":"gutemberglincoln","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/f9e9de99-7497-4b3f-b281-159bcc05f01b/dit7rylc","badges":["available","studio"],"followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/9q2JAEsyamP6ro74HmWC/image-video-carousel-iuc2OhMNh4kTo08PnNjOTIzJWJfToS","metadata":{"tint":{"h":60,"s":25,"l":13},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-04-19T03:05:15.817Z","updatedAt":"2026-05-06T08:16:14.074Z","publishedAt":"2026-05-06T12:11:40.414Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://imgvideocarousel.framer.website/playground","price":"15","paymentUrl":"https://lumerise.gumroad.com/l/ImageVideoCarousel","workshop":false,"categories":[{"id":"8f93ccfe-423c-47f2-b8ae-79e9e132012f","name":"Carousels","slug":"carousels"}],"lastSaveId":"NdAkD5hMb6fVu4e2fw8v","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":8,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-05-06T12:11:40.414Z","updatedAt":"2026-05-06T12:11:40.414Z","reported":false}}],"$L5f"]

Suggested for you