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

Slider Studio is a one-at-a-time snap carousel for Framer. Drop it on a hero, a products section, a testimonials block, or any place where one item should hold focus and the next should arrive cleanly. The transition and the hover treatment are fully in your hands.

Most sliders ship one transition. This one gives you seven, and an optional layer of WebGL hover effects on top.

Seven transitions

Slide, a clean track with a neighbour peek.
Fade, a crossfade in place.
Parallax, the photo drifts inside the frame.
Zoom, the centre pushes in with inner parallax.
Stack, slides deal like a deck.
Cards, upcoming slides fan out behind.
Flip, each card turns in 3D.

Optional WebGL hover effects

RGB Shift, Ripple, Zoom Lens, Glitch, Twist, Pixelate, and Shine. Turn one on and it plays on the centred image on hover, then clears the moment you leave. Built in raw WebGL, no dependencies, and invisible during drags and scrolls so they never fight the motion.

Manual or CMS

Add slides by hand, each with an image or video, a poster, a caption, and a link, or drop a Collection List into the slot and it maps every row automatically, click through links included. It ships with Framer hosted placeholders, so it looks complete on drop in.

Smooth by design

Drag has flick momentum, Scroll to Slide accumulates the wheel into an eased snap, and the easing is frame rate independent, so it feels the same on 60Hz and 120Hz.

Controls

Grouped for clarity: Source, Layout, Motion, Navigation, Hover FX, and Style. Every control carries its own one line description in the panel.

What you get

A snap carousel with seven transitions, seven optional WebGL hover effects, manual or CMS data, drag with momentum, arrows, dots, autoplay, smooth scroll, infinite loop, click through links, no npm dependencies, a calm static preview, and free updates within the version.

Made with 🖤 for Framer by Harsh

5a:[["$","$L5d",null,{"post":{"id":"019f44ed-7a11-7389-abf9-7afd4c29790b","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"6742a5cc-f892-4459-8697-923dd5a77da4","name":"Harsh Works","slug":"harshworks","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/131569/avatar-a0B3vAmCYXJActVKja9SCf8bMXQquH.jpg","badges":["available","expert"],"followed":false,"followsYou":false},"media":[],"resources":[{"id":"1Cm3VeHJDuTspyzLkiir","resolved":true,"title":"Slider Studio","body":"$5e","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Slider Studio is a one-at-a-time snap carousel for Framer. Drop it on a hero, a products section, a testimonials block, or any place where one item should hold focus and the next should arrive cleanly. The transition and the hover treatment are fully in your hands."}]},{"type":"paragraph","content":[{"type":"text","text":"Most sliders ship one transition. This one gives you seven, and an optional layer of WebGL hover effects on top."}]},{"type":"customHeading","content":[{"type":"text","text":"Seven transitions"}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Slide","marks":[{"type":"bold"}]},{"type":"text","text":", a clean track with a neighbour peek."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Fade","marks":[{"type":"bold"}]},{"type":"text","text":", a crossfade in place."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Parallax","marks":[{"type":"bold"}]},{"type":"text","text":", the photo drifts inside the frame."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Zoom","marks":[{"type":"bold"}]},{"type":"text","text":", the centre pushes in with inner parallax."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Stack","marks":[{"type":"bold"}]},{"type":"text","text":", slides deal like a deck."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Cards","marks":[{"type":"bold"}]},{"type":"text","text":", upcoming slides fan out behind."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Flip","marks":[{"type":"bold"}]},{"type":"text","text":", each card turns in 3D."}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Optional WebGL hover effects"}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"RGB Shift, Ripple, Zoom Lens, Glitch, Twist, Pixelate, and Shine. Turn one on and it plays on the centred image on hover, then clears the moment you leave. Built in raw WebGL, no dependencies, and invisible during drags and scrolls so they never fight the motion."}]},{"type":"customHeading","content":[{"type":"text","text":"Manual or CMS"}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"Add slides by hand, each with an image or video, a poster, a caption, and a link, or drop a Collection List into the slot and it maps every row automatically, click through links included. It ships with Framer hosted placeholders, so it looks complete on drop in."}]},{"type":"customHeading","content":[{"type":"text","text":"Smooth by design"}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"Drag has flick momentum, Scroll to Slide accumulates the wheel into an eased snap, and the easing is frame rate independent, so it feels the same on 60Hz and 120Hz."}]},{"type":"customHeading","content":[{"type":"text","text":"Controls"}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"Grouped for clarity: Source, Layout, Motion, Navigation, Hover FX, and Style. Every control carries its own one line description in the panel."}]},{"type":"customHeading","content":[{"type":"text","text":"What you get"}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"A snap carousel with seven transitions, seven optional WebGL hover effects, manual or CMS data, drag with momentum, arrows, dots, autoplay, smooth scroll, infinite loop, click through links, no npm dependencies, a calm static preview, and free updates within the version."}]},{"type":"paragraph","content":[{"type":"text","text":"Made with "},{"type":"emoji","attrs":{"name":"black_heart","emoji":"🖤"}},{"type":"text","text":" for "},{"type":"text","text":"Framer","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://framer.link/harshupadhyay","target":"_blank"}},{"type":"bold"}]},{"type":"text","text":" by "},{"type":"text","text":"Harsh","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://harsh.works/","target":"_blank"}},{"type":"bold"}]}]}]},"introduction":"A CMS snap carousel with FX","slug":"slider-studio","author":{"framerUserId":"6742a5cc-f892-4459-8697-923dd5a77da4","name":"Harsh Works","slug":"harshworks","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/131569/avatar-a0B3vAmCYXJActVKja9SCf8bMXQquH.jpg","badges":["available","expert"],"followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/6742a5cc-f892-4459-8697-923dd5a77da4/0r878ize","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-07-09T03:30:41.437Z","updatedAt":"2026-09-13T07:41:46.958Z","publishedAt":"2026-07-09T03:30:41.434Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://sub.chujiqiqi.com/m/CMSSlider-TsR0FL.js@ghKeOZGQZpgHkPR3AgVy","previewUrl":"https://sliderstudio.framer.website/","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"8f93ccfe-423c-47f2-b8ae-79e9e132012f","name":"Carousels","slug":"carousels"}],"lastSaveId":"ghKeOZGQZpgHkPR3AgVy","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":9,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-07-09T03:30:41.809Z","updatedAt":"2026-07-09T03:30:41.809Z","reported":false}}],"$L5f"]

Suggested for you