5c: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"] 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":{"h":180,"s":70,"l":38},"width":1600,"height":1200}}],"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://re.chujiqiqi.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","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":6,"liked":false},"comments":{"count":2},"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