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.



