5c:I[333483,["/creators-assets/_next/static/immutable/chunks/16d0e6blr3zvd.js","/creators-assets/_next/static/immutable/chunks/3jpuro209qqra.js","/creators-assets/_next/static/immutable/chunks/2qlox892e2j_q.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/07e2f_v4-u-we.js","/creators-assets/_next/static/immutable/chunks/33adfll0sgxzj.js","/creators-assets/_next/static/immutable/chunks/2504rifrkrd_l.js","/creators-assets/_next/static/immutable/chunks/3orcs6a8eyfvz.js","/creators-assets/_next/static/immutable/chunks/19-jcjdymr-fa.js","/creators-assets/_next/static/immutable/chunks/39xjxvqtwa0x7.js","/creators-assets/_next/static/immutable/chunks/41zrh_r6fdtfq.js","/creators-assets/_next/static/immutable/chunks/120zfy8hqrcwf.js","/creators-assets/_next/static/immutable/chunks/19r4rf2zyng-y.js","/creators-assets/_next/static/immutable/chunks/3o3dwck1w1ue6.js","/creators-assets/_next/static/immutable/chunks/2c_4he4mvu2r0.js","/creators-assets/_next/static/immutable/chunks/3n0g19afc7srh.js","/creators-assets/_next/static/immutable/chunks/3q7g04e77g4lf.js","/creators-assets/_next/static/immutable/chunks/1u1uuj9mj0hoo.js","/creators-assets/_next/static/immutable/chunks/0lmnldnlzsgok.js","/creators-assets/_next/static/immutable/chunks/2iw_-bo8jogap.js","/creators-assets/_next/static/immutable/chunks/0z2hzm-7v_g2c.js","/creators-assets/_next/static/immutable/chunks/3o1z26bd2_9eh.js","/creators-assets/_next/static/immutable/chunks/2qeyp4zfa4qwb.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/2qrxli96_t9cq.js","/creators-assets/_next/static/immutable/chunks/27vyv0cqm_295.js","/creators-assets/_next/static/immutable/chunks/1_2vu9p6mra4j.js","/creators-assets/_next/static/immutable/chunks/37uei1iwbnu3m.js","/creators-assets/_next/static/immutable/chunks/05i2jce8amocn.js","/creators-assets/_next/static/immutable/chunks/2njnkxjf39nsf.js","/creators-assets/_next/static/immutable/chunks/3edl5e308nytq.js","/creators-assets/_next/static/immutable/chunks/17w9c6wazundy.js","/creators-assets/_next/static/immutable/chunks/3zq_69yv5l6lg.js","/creators-assets/_next/static/immutable/chunks/14pxn0b6e1dc9.js","/creators-assets/_next/static/immutable/chunks/44oc0x6k7mw-i.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/2_qutx8yar-up.js","/creators-assets/_next/static/immutable/chunks/0p4vy6mn-x9zs.js"],"PostDetailCard"] 5d:T9cc,

DragSlider Component Features

Drag-to-scroll interaction: Users can intuitively drag through content with smooth, physics-based motion.
Custom cursor experience: Add a unique branded touch with a floating cursor label (e.g., “Drag”).
Navigation arrows: Built-in previous/next buttons with customizable styles and positioning.
Hover effects: Interactive hover states for buttons with full color control.
Flexible layout control: Adjust spacing, padding, and alignment to fit any design system.
Responsive behavior: Automatically recalculates width and constraints for all screen sizes.
Smooth animations: Powered by spring physics for a natural, premium feel.
Component-based content: Easily plug in cards, images, or any Framer components.

How to Use

Add the component to your canvas: Drag the slider into your layout.
Connect your items: In the Items property, insert your components (cards, images, etc.).
Customize spacing: Adjust Gap and Padding to control layout flow.
Style your navigation: Set arrow colors, stroke, and hover effects.
Position controls: Choose where arrows appear (top/bottom, left/right).
Enhance interaction: Enable hover effects and customize cursor text.

Who It’s For

Web designers building modern, interactive layouts
Agencies and studios creating premium client websites
SaaS and startup founders showcasing features or products
Portfolio creators who want a standout browsing experience
Content creators displaying media, case studies, or galleries

Perfect For

Image galleries
Case study sliders
Testimonials
Product showcases
Portfolio sections

Why This Stands Out

Unlike basic sliders, this component focuses on interaction quality, making your site feel more dynamic, engaging, and premium without sacrificing performance or simplicity.

59:[["$","$L5c",null,{"post":{"id":"019dafcc-5991-71d1-8c3d-fe8c6a0e4bd1","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"f2c48029-95c6-4ea4-a3da-dbda90cdb3a7","name":"Victor Adekunle","slug":"victor-adekunle","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/237869/avatar-fuJl8vVB5r2wWw9z5kBVTuiisdd0v4.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"OoBLgWQacfsks5e5Yaff","resolved":true,"title":"DragSlider","body":"$5d","bodyJson":null,"introduction":"A draggable slider with custom cursor","slug":"dragslider","author":{"framerUserId":"f2c48029-95c6-4ea4-a3da-dbda90cdb3a7","name":"Victor Adekunle","slug":"victor-adekunle","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/237869/avatar-fuJl8vVB5r2wWw9z5kBVTuiisdd0v4.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/OoBLgWQacfsks5e5Yaff/dragslider-pRPE9fcpQDHtnmy40gLbEtQXvVtBAp"}],"post":null,"createdAt":"2026-04-14T18:13:25.404Z","updatedAt":"2026-06-01T00:10:55.468Z","publishedAt":"2026-04-21T11:28:18.321Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://framer.com/m/Drag-Slider-Cursor-UrEqCl.js@HyE6ou1arXvtPjWzsobf","previewUrl":"https://dragslider.framer.website/","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"8f93ccfe-423c-47f2-b8ae-79e9e132012f","name":"Carousels","slug":"carousels"}],"lastSaveId":"HyE6ou1arXvtPjWzsobf"}}],"contests":[],"categories":[],"tags":[],"likes":{"count":42,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-04-21T11:28:18.321Z","updatedAt":"2026-04-21T11:28:18.321Z","reported":false}}],"$L5e"]

Suggested for you