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

A production-ready horizontal slider for Framer with drag, swipe, and scroll interaction modes. Choose drag-only, scroll-only, or combine both for flexible user control. Built on a unified motion system that delivers smooth parallax effects while preserving stable vertical page behavior.

About This Component

Drag Parallax Slider is a high-performance horizontal slider designed for real Framer websites.

It supports three interaction modes:

Drag and swipe interaction
Scroll-driven horizontal movement
Combined drag and scroll behavior

All modes run through a single motion engine. This ensures consistent motion physics, smooth parallax depth, and reliable behavior across desktop and mobile.

You decide how users navigate content.The rest of the page remains stable.

Interaction Architecture

Horizontal sliders often conflict with vertical scroll behavior.

This component avoids that.

Instead of overriding global scroll or relying on sticky positioning, it treats interaction as configurable and local. Drag, swipe, and scroll feed the same motion system, ensuring:

No competing logic
No hidden scroll overrides
No layout side effects
No unintended horizontal movement

Creators choose the behavior. The system remains consistent.

Why Flexible Interaction Matters

Different projects require different interaction models:

Portfolio galleries benefit from intentional drag-based control
Editorial layouts may prefer scroll-driven progression
Product showcases often benefit from both for accessibility

By making interaction configurable, this slider adapts to real-world use cases instead of forcing one pattern.

The result:

Natural vertical scrolling preserved
Controlled horizontal movement
Reliable performance inside stacks and sections
Smooth parallax without scroll takeover
A refined, professional motion experience

Motion supports the content instead of distracting.

Key Features

Smooth mouse drag and touch swipe interaction
Optional scroll-driven horizontal slider mode
Enable drag-only, scroll-only, or combined interaction
Velocity-based motion with natural deceleration
Subtle parallax movement for visual depth
Smart click protection to prevent accidental clicks
Fully responsive across desktop and mobile
requestAnimationFrame-powered performance
Simple slide management via data props
Safe inside vertical scrolling layouts

Summary

Drag Parallax Slider is a configurable horizontal slider for Framer that supports drag, swipe, and scroll interaction modes. Built on a unified motion system, it delivers smooth parallax movement while maintaining predictable page behavior.

Flexible. Predictable. Production-ready.

5a:[["$","$L5d",null,{"post":{"id":"019c157b-ef34-7b0b-b9b4-022610bbc567","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"7fd40dc2-5d88-48bc-bbee-09cf536c40ce","name":"CndlHaus Studio","slug":"antony-raphy","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/7fd40dc2-5d88-48bc-bbee-09cf536c40ce/oqu6u53f","badges":["available","expert"],"followed":false,"followsYou":false},"media":[],"resources":[{"id":"HUJWOvMQSWlYAvG3Z3fu","resolved":true,"title":"Drag Parallax Slider","body":"$5e","bodyJson":null,"introduction":"Horizontal slider with drag and scroll","slug":"drag-parallax-slider","author":{"framerUserId":"7fd40dc2-5d88-48bc-bbee-09cf536c40ce","name":"CndlHaus Studio","slug":"antony-raphy","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/7fd40dc2-5d88-48bc-bbee-09cf536c40ce/oqu6u53f","badges":["available","expert"],"followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/HUJWOvMQSWlYAvG3Z3fu/drag-parallax-slider-GoGyi8INrFBmFQFi06qWhRosFUAxN7","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-01-19T17:41:42.083Z","updatedAt":"2026-04-30T18:48:10.517Z","publishedAt":"2026-01-31T19:16:09.652Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://understanding-aim-055043.framer.app/","price":"5","paymentUrl":"https://buy.polar.sh/polar_cl_eB5lRzvW9MB9OfMkJ7fVMxE8iq8QQm0ee9L584Ubj93","workshop":true,"categories":[{"id":"8f93ccfe-423c-47f2-b8ae-79e9e132012f","name":"Carousels","slug":"carousels"}],"lastSaveId":"PEU4aorPDsjLBxlUdKp0","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":6,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-01-31T19:16:09.652Z","updatedAt":"2026-01-31T19:16:09.652Z","reported":false}}],"$L5f"]

Suggested for you