5c:I[333483,["/creators-assets/_next/static/immutable/chunks/16d0e6blr3zvd.js","/creators-assets/_next/static/immutable/chunks/1rdgef59pv3cw.js","/creators-assets/_next/static/immutable/chunks/0zdv1ssrxkrvj.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/0gxswkth5mc6b.js","/creators-assets/_next/static/immutable/chunks/33adfll0sgxzj.js","/creators-assets/_next/static/immutable/chunks/41zrh_r6fdtfq.js","/creators-assets/_next/static/immutable/chunks/36invrtoq879v.js","/creators-assets/_next/static/immutable/chunks/19-jcjdymr-fa.js","/creators-assets/_next/static/immutable/chunks/2504rifrkrd_l.js","/creators-assets/_next/static/immutable/chunks/0j6nyijn0flqd.js","/creators-assets/_next/static/immutable/chunks/2b15v_9ruhnys.js","/creators-assets/_next/static/immutable/chunks/3zq_69yv5l6lg.js","/creators-assets/_next/static/immutable/chunks/19r4rf2zyng-y.js","/creators-assets/_next/static/immutable/chunks/3h1dt97hv5ik0.js","/creators-assets/_next/static/immutable/chunks/39xjxvqtwa0x7.js","/creators-assets/_next/static/immutable/chunks/17w9c6wazundy.js","/creators-assets/_next/static/immutable/chunks/1u1uuj9mj0hoo.js","/creators-assets/_next/static/immutable/chunks/14pxn0b6e1dc9.js","/creators-assets/_next/static/immutable/chunks/2iw_-bo8jogap.js","/creators-assets/_next/static/immutable/chunks/3o1z26bd2_9eh.js","/creators-assets/_next/static/immutable/chunks/2qeyp4zfa4qwb.js","/creators-assets/_next/static/immutable/chunks/1_2vu9p6mra4j.js","/creators-assets/_next/static/immutable/chunks/2qrxli96_t9cq.js","/creators-assets/_next/static/immutable/chunks/0w757zrv0hi6k.js","/creators-assets/_next/static/immutable/chunks/3edl5e308nytq.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/37uei1iwbnu3m.js","/creators-assets/_next/static/immutable/chunks/44oc0x6k7mw-i.js","/creators-assets/_next/static/immutable/chunks/2njnkxjf39nsf.js","/creators-assets/_next/static/immutable/chunks/27vyv0cqm_295.js","/creators-assets/_next/static/immutable/chunks/3n0g19afc7srh.js","/creators-assets/_next/static/immutable/chunks/3o3dwck1w1ue6.js","/creators-assets/_next/static/immutable/chunks/1h-r9oggqjick.js","/creators-assets/_next/static/immutable/chunks/05i2jce8amocn.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/2051y-i4b0nnm.js"],"PostDetailCard"] 5d:T924,

A fully custom-coded, drag-and-swipe carousel component for building card-based, swipe-native content. Built to feel a bit like instagram carousel posts, but better.

Drop it into any project: upload your images, pick from three aspect ratios (1:1, 4:5, 16:9), and configure spacing, corner radius, arrows, dots, and transition speed entirely from the panel. No code required. Drag, flick, arrow-key, and click navigation all work out of the box, with full keyboard accessibility and automatic support for reduced-motion preferences.

Using it as a component

Add it to a hero, a portfolio grid, a product gallery. Anywhere you want swipeable, card-based content that feels native on both mobile and desktop.

Want a full page built around it?

This same component can also carry an entire landing page. A launch, waitlist, or portfolio told one card at a time instead of a long scroll. Building that out yourself means pacing a story across cards, writing copy tight enough to earn each swipe, and structuring a hero, feature set, and CTA around the component. You're welcome to do that at your own pace. Or, if you'd rather skip straight to a finished page, custom builds are available: send over your brand and content, and I'll design, write, and launch the full experience for you.

Key features

Fully custom-coded drag-and-swipe carousel, not a stock Framer component
1:1, 4:5, or 16:9 aspect ratios, switchable from the panel
2–12 slides, adjustable gap and corner radius
Arrows, dots, keyboard, and drag navigation, all optional and configurable
Arrows auto-collapse on narrow screens
Full keyboard support and screen-reader accessibility
Respects reduced-motion preferences automatically
Optimized for both mobile and desktop

Perfect for

Image galleries · Product showcases · Portfolio pieces · Swipe-native landing pages — build the page yourself, or have it built for you

Want the full page done for you?

Custom builds available. Get in touch for a quote: ranjit.sn131@gmail.com

59:[["$","$L5c",null,{"post":{"id":"01a04eb5-0f17-776d-a0e3-6d56469d5b35","title":null,"body":"

Instagram-like component for framer

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Instagram-like component for framer"}]}]},"author":{"framerUserId":"f5078184-41c2-459c-9f80-c0d3c7d9417e","name":"Ranjit Singh","slug":"ranjit-singh-1","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/f5078184-41c2-459c-9f80-c0d3c7d9417e/podagnpi","followed":false,"followsYou":false},"media":[],"resources":[{"id":"lPEPZAMtPlNB8MxaAc73","resolved":true,"title":"Swwwipe","body":"$5d","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"A fully custom-coded, drag-and-swipe carousel component for building card-based, swipe-native content. Built to feel a bit like instagram carousel posts, but better. "}]},{"type":"paragraph","content":[{"type":"text","text":"Drop it into any project: upload your images, pick from three aspect ratios (1:1, 4:5, 16:9), and configure spacing, corner radius, arrows, dots, and transition speed entirely from the panel. No code required. Drag, flick, arrow-key, and click navigation all work out of the box, with full keyboard accessibility and automatic support for reduced-motion preferences."}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"Using it as a component","marks":[{"type":"bold"}]},{"type":"text","text":" "}]},{"type":"paragraph","content":[{"type":"text","text":"Add it to a hero, a portfolio grid, a product gallery. Anywhere you want swipeable, card-based content that feels native on both mobile and desktop."}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"Want a full page built around it?","marks":[{"type":"bold"}]},{"type":"text","text":" "}]},{"type":"paragraph","content":[{"type":"text","text":"This same component can also carry an entire landing page. A launch, waitlist, or portfolio told one card at a time instead of a long scroll. Building that out yourself means pacing a story across cards, writing copy tight enough to earn each swipe, and structuring a hero, feature set, and CTA around the component. You're welcome to do that at your own pace. Or, if you'd rather skip straight to a finished page, custom builds are available: send over your brand and content, and I'll design, write, and launch the full experience for you."}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"Key features","marks":[{"type":"bold"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Fully custom-coded drag-and-swipe carousel, not a stock Framer component"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"1:1, 4:5, or 16:9 aspect ratios, switchable from the panel"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"2–12 slides, adjustable gap and corner radius"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Arrows, dots, keyboard, and drag navigation, all optional and configurable"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Arrows auto-collapse on narrow screens"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Full keyboard support and screen-reader accessibility"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Respects reduced-motion preferences automatically"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Optimized for both mobile and desktop"}]}]}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"Perfect for","marks":[{"type":"bold"}]},{"type":"text","text":" "}]},{"type":"paragraph","content":[{"type":"text","text":"Image galleries · Product showcases · Portfolio pieces · Swipe-native landing pages — build the page yourself, or have it built for you"}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"Want the full page done for you?","marks":[{"type":"bold"}]},{"type":"text","text":" "}]},{"type":"paragraph","content":[{"type":"text","text":"Custom builds available. Get in touch for a quote: "},{"type":"text","text":"ranjit.sn131@gmail.com","marks":[{"type":"bold"}]}]}]},"introduction":"Instagram-like carousel","slug":"swwwipe","author":{"framerUserId":"f5078184-41c2-459c-9f80-c0d3c7d9417e","name":"Ranjit Singh","slug":"ranjit-singh-1","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/f5078184-41c2-459c-9f80-c0d3c7d9417e/podagnpi","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/f5078184-41c2-459c-9f80-c0d3c7d9417e/01a04eb4-a1eb-7639-a649-4664a2e4dc55.png","metadata":{"tint":"hsl(180 70% 38%)","aspectRatio":1.3333333333333333}}],"post":null,"createdAt":"2026-08-29T18:08:03.260Z","updatedAt":"2026-08-29T18:08:03.260Z","publishedAt":"2026-08-29T18:08:03.250Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://framer.com/m/Swwwipe-KyiNvP.js@9kM6esZ86u5oodsItQIH","previewUrl":"https://swwwipe.framer.website/","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"8f93ccfe-423c-47f2-b8ae-79e9e132012f","name":"Carousels","slug":"carousels"}],"lastSaveId":"9kM6esZ86u5oodsItQIH"}}],"contests":[],"categories":[],"tags":[],"likes":{"count":5,"liked":false},"comments":{"count":1},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-08-29T18:08:03.863Z","updatedAt":"2026-08-29T18:08:03.863Z","reported":false}}],"$L5e"]

Suggested for you