Slide 1 of 4

Ever wanted to build an Instagram-style image carousel — but on your own website?

Look no further. I built this component for a client after testing several off-the-shelf options, none of which quite did the job, so I ended up rolling my own solution.


It's fully draggable: mobile users can swipe between photos, while desktop and tablet users get a custom cursor hover state (Apple Pencil supported too). Under the hood it runs on spring physics, so slides glide and settle naturally instead of snapping — and rapid clicks carry momentum through for a smooth feel. You also get keyboard navigation (arrow keys, plus Home/End to jump to the first or last slide) and built-in accessibility: proper ARIA roles, screen-reader slide announcements, and automatic respect for the user's reduced-motion preference.


Just about everything is customizable from Framer's properties panel — connect your own arrow and hover-icon components, tune the animation stiffness and damping, set active/inactive dot colors, and drop in up to 10 images.

Credit to ui-layouts.com for the original sample that inspired how this component should look and behave. I adapted and optimized the code to run on Framer, exposed each image slot as its own bindable variable so slides can be driven dynamically, and added per-slide Alt Text variables so the descriptions can be populated straight from Notion through the CMS (This was a current limitation with the Notion Plug-in so this was basically the only way I could make this work).

Hope you and the rest of the Framer community like and use this across your projects, looking forward to seeing what others can do with it.

Create a free website with Framer, the website builder loved by startups, designers and agencies.